如何使用javascript自动将文件发送到表单

Question

我有一些客户端JavaScript，如果用户执行诸如单击"OK“按钮等操作，它将输出一个基于HTML5 canvas操作的jpeg文件。

我希望jpeg输出在表单中自动加载到“上传前端”字段中，就像用户从自己的硬盘上上传文件一样。

然而，我似乎无法让它发挥作用。

这是表格：

<div class="property-wrapper">
    <label for="upload-front">Upload Front Side</label>
    <input id="upload" class="file" type="file" enctype="multipart/form-data" id="Front-Side" name="properties[Front Side]" onchange="readURL(this);" accept="image/*" /> 
</div>
<script>
    document.getElementById('upload').value="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/353px-Turkish_Van_Cat.jpg"
</script>

Answer 1

问题是，由于安全原因，浏览器对可编程地进行文件上传的操作有几个限制，请看一下这个answer。

文件上载功能可能是可利用的，例如，如果文件上载输入字段隐藏在display:none中，某些浏览器将不会打开资源管理器框。

大多数浏览器将不允许以编程方式单击文件上载元素，而是要求用户单击它们，以防止有人将链接发送到立即从用户硬盘上窃取内容的页面的攻击。

因此，由于常见的浏览器安全限制，您提到的功能似乎不可行。通常没有错误消息或警告，它只是不起作用。

使用文件上传浏览器输入组件的替代方法可以是在Base64中对文件内容进行编码，并发送ajax POST的正文。

Answer 2

您是在问如何通过表单将从页面的画布中提取的图形图像上传到服务器吗？这将是有用的，我希望看到这个答案。

首先，我将允许用户下载/导出映像。这可能是用一个水珠做的。对于文本数据导出，我已经这样做了，工作得很好。

也许有一种方法可以应用相同的技巧，只需将blob/缓冲区提供给服务器即可。

另一条路径可能是将文件“放在”服务器上。

希望这能有所帮助。

Answer 3

我将ajax发布一个base64编码的图像字符串，而忘记了整个文件上传的内容。您可以直接上传画布代码，如果需要预览或其他东西，可以将其重新转换为服务器端，或者查看画布/图像转换器代码中还有哪些其他输出可用。

我假设您正在上传到同一台服务器，这样您就不会有跨域问题，但否则您可以很容易地设置您的服务器来接受跨域ajax请求。