如何在文件输入更改事件中使用循环

Question

您好，我有以下代码

function fileValidation() {
  var fileInput = document.getElementById('filech');
  var filePath = fileInput.value;
  var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  if (!allowedExtensions.exec(filePath)) {
    alert('error .jpeg/.jpg/.png/.gif ');
    fileInput.value = '';
    return false;
  } else {
    //Image preview
    if (fileInput.files && fileInput.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        document.getElementById('imagePreview').innerHTML = '<img src="' + e.target.result + '"/>';
      };
      reader.readAsDataURL(fileInput.files[0]);
    }
  }
}

<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />

<div id="imagePreview"></div>

上传照片

   <input  id="filech"  type="file" name="file_img[]" multiple onchange="return fileValidation()" />

然后显示

<div id="imagePreview"></div>

我想显示所有图片而不是一张

这里如何使用循环，谢谢大家

Answer 1

正如您所说，您需要一个循环，最简单的方法是使用for 循环，如下所示：

    for (var i = 0; i < fileInput.files.length; i++) {
      if (fileInput.files && fileInput.files[i]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('imagePreview').innerHTML += '<img src="' + e.target.result + '"/>';
        };
        reader.readAsDataURL(fileInput.files[i]);
      }
    }

注意：

注意我把它改成了document.getElementById('imagePreview').innerHTML +=，所以它会继续打印所有迭代的图像，否则它只会用最后一个图像内容覆盖预览。

但最佳做法是在每次迭代时创建一个img 元素并将其附加到预览 div：

for (var i = 0; i < fileInput.files.length; i++) {
  if (fileInput.files && fileInput.files[i]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement("img");
      img.src = e.target.result;
      document.getElementById('imagePreview').appendChild(img);
    };
    reader.readAsDataURL(fileInput.files[i]);
  }
}

演示：

function fileValidation() {
  var fileInput = document.getElementById('filech');
  var filePath = fileInput.value;
  var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  if (!allowedExtensions.exec(filePath)) {
    alert('error .jpeg/.jpg/.png/.gif ');
    fileInput.value = '';
    return false;
  } else {
    //Image preview
    for (var i = 0; i < fileInput.files.length; i++) {
      if (fileInput.files && fileInput.files[i]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          var img = document.createElement("img");
          img.src = e.target.result;
          document.getElementById('imagePreview').appendChild(img);
        };
        reader.readAsDataURL(fileInput.files[i]);
      }
    }
  }
}

<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />


<div id="imagePreview"></div>