在表单中的输入类型=“文件”中添加图像并将它们都提交到同一表单后，如何生成缩略图

小编典典

在表单中的输入类型=“文件”中添加图像并将它们都提交到同一表单后，如何生成缩略图

ajax

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

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

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

阅读 264

2020-07-26

共1个答案

小编典典

我找到了这个更简单但功能强大的教程。它只是创建一个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...">

2020-07-26