我有一个包含输入类型=“文件”的表单来上传图片,我希望能够在提交之前操作该图片。
(例如,我可能想使用现有的jQuery库裁剪或调整它。我发布到WordPress并且与重力形式绑定,这意味着我不能使用jQuery文件等插件-upload也包括服务器端处理,所以我的问题更通用。)
我正在尝试了解提交时会发生什么以及浏览器如何构建服务器处理的帖子。
如果用户选择了一个文件,我是否可以使用该文件并在javascript中对其执行某些操作,然后在表单提交中让浏览器从内存中取出我修改后的版本,而不是在输入字段中链接到的原始版本?
[编辑]
所以,我发现了一些有用的见解。任何看过这个的人,here都是SO上的一个有用的主题。
当用户在文件输入字段上选择图像时,我可以使用html5画布来操作它。然后我需要将其转换回二进制文件进行上传(在最现代的浏览器中通过canvas.toBlob(),或者使用上面链接中提到的旧浏览器技术)。
那我该怎么办呢?我可以按照this Mozilla developers article通过Ajax发布它,对大多数人来说这没问题。
我的问题是我与使用Gravity Forms有关,我需要让它处理表单提交。
这意味着我需要操纵现有表单并让用户正常点击提交按钮。
我的表单有
<input type="file" name="input_3" id="input_3_3">
我在JavaScript中尝试过:
document.getElementbyId('input_3_3').value = myBlob;
但似乎我无法将blob分配给输入字段。
阅读,涉及Ajax的解决方案使用FormData对象,我想我可以追加该字段,但似乎不起作用(DOM和FormData对象中页面上的表单是不一样吗?)。
所以,那就是我被困住的地方。
答案 0 :(得分:0)
理论上你可以使用blob,但实际上它并不是一个好的解决方案,因为它并不是所有的浏览器都支持,并且目前没有javascripts库可以处理图像,所以最好的办法是将它发送给服务器并让它服务器处理它。