javascript - 调整图像大小并附加到 HTML 表单的正确方法？

Question

我正在尝试在提交表单之前调整客户端图像的大小，然后将其附加到表单中。当我最初提交这个时，它似乎工作正常。但在服务器端它仍然上传原始文件。这可能吗？

Answer 1

我在解决同样的问题时才注意到这篇文章。不可能用调整大小的输入来替换用户选择的"file"类型的输入。出于安全原因，浏览器不允许这样做。该表单是使用同步 HTTP POST 发布的。根据一些文章，更改后的图像应该异步发布。所有示例都使用 XHR 或 Ajax 来实现此目的。可能的解决方案似乎是这样的:1)调整图像大小并将canvas转换为dataUrl或blob；2) 向表单添加新的隐藏字段或将图像上传移到表单之外；3)使用XHR或Ajax发布调整大小的图像；4)从"file"类型的原始输入中删除名称属性(这将阻止其提交)或忽略服务器端；5) 在服务器上解码 dataUrl 并将图像保存在您的上传文件夹中。