如何在开机自检前操作表单文件输入

How to manipulate form file input before POST

本文关键字:操作表 表单 文件 输入 操作 开机自检      更新时间:2023-09-26

我有一个表单,其中包含一个输入类型="文件"来上传图像,我希望能够在提交之前操作该图像。

(例如,我可能想使用现有的jQuery库裁剪或调整其大小。我正在发布到 WordPress 并且与重力表单绑定,这意味着我不能使用诸如 jQuery-file-upload 之类的插件,它也包括服务器端处理,所以我的问题更通用。

我试图了解提交时会发生什么以及浏览器如何构建服务器处理的帖子。

如果用户选择了一个文件,我可以获取该文件并在javascript中对其进行处理,然后在表单提交时让浏览器从内存中获取我的修改版本,而不是输入字段中链接到的原始版本?

[编辑]

所以,我发现了一些有用的见解。任何看这个的人,这里有一个有用的线程 SO.

当用户在文件输入字段上选择图像时,我可以使用 html5 canvas 来操作它。然后我需要将其转换回二进制文件进行上传(在最现代的浏览器中通过 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 对象不是一回事?

所以,这就是我卡住的地方。

理论上你可以使用 blob ,但实际上它不是很好的解决方案,因为它并不是所有浏览器都支持,并且目前没有 javascripts 库来处理图像,所以最好的办法是将其发送到服务器并让服务器处理它。