javascript - 如何在 POST 之前操作表单文件输入

Question

我有一个表单，其中包含用于上传图像的输入 type="file"，并且我希望能够在提交之前操作该图像。

(例如，我可能想使用现有的 jQuery 库来裁剪或调整它的大小。我正在向 WordPress 发帖，并与重力形式绑定(bind)，这意味着我无法使用 jQuery-file 等插件-upload 也包括服务器端处理，所以我的问题更通用。)

我试图了解提交时发生的情况以及浏览器如何构造要由服务器处理的帖子。

如果用户选择了一个文件，我可以获取该文件并在 JavaScript 中对其执行某些操作，然后在表单提交上让浏览器从内存中获取我的修改版本，而不是输入字段中链接到的原始版本？

[编辑]

所以，我发现了一些有用的见解。任何人看到这个，here是关于 SO 的一个有用的线程。

当用户在文件输入字段中选择图像时，我可以使用 html5 canvas 来操作它。然后，我需要将其转换回二进制文件以进行上传(在最现代的浏览器中通过 canvas.toBlob() ，或者对于较旧的浏览器使用上面链接中提到的技术)。

那我该怎么办呢？我可以按照 this Mozilla developers article 通过 Ajax 发布它对于大多数人来说这没什么问题。

我的问题是我必须使用重力表单，我需要让它处理表单提交。

这意味着我需要操作现有表单并让用户正常点击提交按钮。

我的表单有

<input type="file" name="input_3" id="input_3_3">

我在 JavaScript 中尝试过:

document.getElementbyId('input_3_3').value = myBlob;

但我似乎无法将 blob 分配给输入字段。

阅读周围，涉及 Ajax 的解决方案使用 FormData 对象，我想我可能能够附加该字段，但这似乎不起作用(DOM 中页面上的表单和 FormData 对象是不是同一件事吗？)。

所以，这就是我陷入困境的地方。

Answer 1

理论上您可以使用 blob ，但实际上这不是一个好的解决方案，因为并非所有浏览器都支持它，并且当前没有 javascripts 库来处理图像，因此最好的选择是将其发送到服务器并让服务器处理它。