Question

我有一个html表单，它将POST数据发送到我的PHP脚本

它还使用AJAX在完成表单时提供预览

但是表单使用onsubmit =“”

我遇到的问题是html输入之一是图像。

表单如下为您提供了一个想法：

<form method="post" action="scripts/test.php" enctype="multipart/form-data">
<input type="hidden" name="size" id="size" value="small" />
<input type="hidden" name="type" id="type" value="1" />
<input type="hidden" name="pos" id="pos" value="front" />
<input type="hidden" name="number" id="number" value="none" />
<input type="hidden" name="name" id="name" value="none" />
<label>Choose Your First Shirt Colour</label><br /> <input class="color" value="ff3300" id="colour1" name="colour1" onchange="change()">
<br /><br />
<label>Choose Your Second Shirt Colour</label><br />
<input class="color" value="FFFFFF" id="colour2" name="colour2" onchange="change()">
<br /><br /><label>Add Your Logo: <br />
<span style="font-size:11px;color:#FF0000;">(if you are having trouble adding your logo please contact us on 0845 6018370)</span></label>
<br />
<input type="file" name="logo" id="logo" onchange="change()"/><br /><br />
<label>Add Your Text:</label><br />
<textarea name="text" cols="30" id="text" rows="5" onchange="change()"></textarea><br />
<label><span style="color:#000000;">Quantity: </span></label>
<input type="text" id="quantity" name="quantity" value="1" style="width:40px;height:20px;"/><br /><br />
<input type="button" name="preview" value="Preview" onclick="MyPreview()"/><br />
<input type="submit" name="submit" value="Submit" />
</form>

我正在使用

var logo = document.getElementById（“logo”）。value;

对于图像，但是当我将徽标值发送到PHP时，它会破坏图像，因为它不是发送到PHP脚本所需的正确post值，就像提交表单一样。

有没有人知道如何使用onchange和javascript为logo html字段获取相同的帖子值？

Answer 1

如果我理解正确，你只想在文件输入值改变时显示图像的预览，对吗？

如果是这样，我想你想要做的只是从用户的本地驱动器加载图像的预览，而不是真正上传到你的服务器。当用户已经提交表单时，可以完成实际的文件上传。

要执行上述过程（加载图像文件的预览），HTML5的FileReader API。

使用FileReader API实际上很简单，可以这样做：

<强>的Javascript

var logo = document.getElementById("logo").files[0]; // will return a File object containing information about the selected file
// File validations here (you may want to make sure that the file is an image)

var reader = new FileReader();
reader.onload = function(data) {
  // what you want to do once the File has been loaded
  // you can use data.target.result here as an src for an img tag in order to display the uplaoded image
  someImageElement.src = data.target.result; // assume you have an image element somewhere, or you may add it dynamically
}
reader.readAsDataURL(logo);

您可以将此代码放在onchange事件处理程序中，我猜你不会在这里需要AJAX。

然后，当提交表单时，可以在$_FILES数组中的通常位置获取图像数据。

Answer 2

如果你不能使用html5功能，我认为你必须将文件上传到服务器进行预览

（f）打开您的$_FILES['userfile']['tmp_name']并将原始内容发回给我，请参阅：How can I use $.ajax to set image src to dynamic image/png data?。您可以在发送数据之前调整图像大小，然后删除图像。

如何通过javascript发布图像数据

2 个答案: