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

我有一些客户端JavaScript，如果用户执行诸如单击“确定”按钮之类的操作，它将基于HTML5

canvas

操作输出一个jpeg文件

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

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

表格如下：

<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>

上传正面
document.getElementById（'upload'）。值=”http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/353px-Turkish_Van_Cat.jpg"

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

我首先让用户能够下载/导出图像。这可以用一个水滴来完成。我为文本数据导出做了这项工作，效果很好

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

另一个路径可能是将文件“放入”服务器

---

希望这能有所帮助。

问题是，出于安全原因，浏览器对文件上传的编程方式有一些限制，请看一下

文件上载功能可能会被利用，例如，如果文件上载输入字段隐藏为display:none，则某些浏览器将无法打开资源管理器框

大多数浏览器不允许对文件上载元素进行程序性单击，而是要求用户单击它们，以防止有人发送指向页面的链接，从而立即从用户硬盘中窃取内容的攻击

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

---

使用file upload browser输入组件的另一种替代方法是在Base64中对文件内容进行编码，然后发送到ajax文章的正文中

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

---

我假设您正在上载到同一台服务器，这样您就不会有跨域问题，但您可以将服务器设置为非常轻松地接受跨域ajax请求。

您能重新表述您的问题吗？我真的不明白你想做什么。。。是否要将外部文件从internet加载到画布中？问题中的代码似乎与描述它的文本不匹配。最后，您是否找到了通过ajax发布文件的方法？