0

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

它还使用 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 脚本所需的正确帖子值，就好像您正在提交表单一样。

有谁知道如何简单地通过使用 onchange 和 javascript 为 logo html 字段获取相同的 post 值？

4

2 回答 2

0

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

(f) 打开您的$_FILES['userfile']['tmp_name']并将其发送回原始内容，请参阅：如何使用 $.ajax 将图像 src 设置为动态图像/png 数据？. 您可以在发回数据之前调整图像大小，然后删除图像。

于 2013-04-17T14:33:05.290 回答
0

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

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

要执行上述过程（加载图像文件的预览），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数组中获取。

于 2013-04-17T08:45:15.793 回答