如何通过javascript发布图像数据

how to post image data through javascript

本文关键字：图像 数据 布图像 何通过 javascript      更新时间：2023-09-26

我有一个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它打破了图像，因为它不是正确的post值需要通过发送到PHP脚本，好像你正在提交的形式。

有没有人知道如何通过使用onchange和javascript简单地获得相同的标签html字段的post值?

如果我理解正确的话，您只是想在文件输入的值发生变化时显示图像的预览，对吗?

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

要完成上述过程(加载图像文件的预览)，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数组中通常的位置获得。

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

(f)打开你的$_FILES['userfile']['tmp_name']并将原始内容发送回来，参见:我如何使用$。Ajax设置图像SRC为动态图像/png数据?您可以在发送数据之前调整图像的大小，然后删除图像。

相关文章：