我有一个表单,其中包含一个输入 type="file" 来上传图像,并且我希望能够在提交之前操作该图像。
(例如,我可能想使用现有的 jQuery 库对其进行裁剪或调整大小。我正在发布到 WordPress 并且与重力形式相关联,这意味着我不能使用诸如 jQuery-file-upload 之类的插件也包括服务器端处理,所以我的问题更笼统。)
我试图了解提交时会发生什么以及浏览器如何构造要由服务器处理的帖子。
如果用户选择了一个文件,我可以获取该文件并在 javascript 中对其进行处理,然后在表单提交上让浏览器从内存中获取我的修改版本,而不是在输入字段中链接到的原始版本吗?
[编辑]
所以,我发现了一些有用的见解。任何人都在看这个,这里有一个关于 SO 的有用线程。
当用户在文件输入字段中选择图像时,我可以使用 html5 画布来操作它。然后我需要将其转换回二进制文件以上传(在最现代的浏览器中通过 canvas.toBlob(),或者使用上面链接中提到的旧浏览器的技术)。
那我该怎么办呢?根据这篇 Mozilla 开发人员文章,我可以通过 Ajax 发布它,对于大多数人来说这很好。
我的问题是我使用重力表单,我需要让它处理表单提交。
这意味着我需要操纵我现有的表单并让用户像往常一样点击提交按钮。
我的表格在哪里
<input type="file" name="input_3" id="input_3_3">
我在 JavaScript 中尝试过:
document.getElementbyId('input_3_3').value = myBlob;
但似乎我无法将 blob 分配给输入字段。
阅读周围,涉及 Ajax 的解决方案使用 FormData 对象,我认为我可能能够附加该字段,但这似乎不起作用(DOM 中页面上的表单和 FormData 对象不一样事物?)。
所以,这就是我卡住的地方。