javascript - 如何在表单中的输入类型 ="file"中添加图像并在同一表单上提交它们后生成缩略图

Question

我有一个允许用户上传图片的表单。 用户提交表单后，我想在前端为每张图片生成一个缩略图，然后存储在服务器上。

出于安全原因，无法更改文件输入字段的值，那么如何将在 js 中前端生成的一些缩略图图像发送到服务器？

前端是否可以在表单提交之前从输入文件字段中设置的图像生成缩略图？然后同时提交？

Answer 1

我找到了 This simpler yet powerful tutorial .它只是创建一个 img 元素，并使用 fileReader 对象，将其 source 属性分配为表单输入的值

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">