如何防止上传重复的图像以便在上传之前进行预览

Question

您能看一下这段代码，让我知道如何停止加载预览中已经列出的文件吗？显然，这仅在完全相同的文件选择上传进行预览时才有效，但是如果新文件很少，则所有文件都将毫无问题地上传。

// var url = window.URL || window.webkitURL; // alternate use

function readImage(file) {
  var reader = new FileReader();
  var image = new Image();

  reader.readAsDataURL(file);
  reader.onload = function(_file) {
    image.src = _file.target.result; // url.createObjectURL(file);
    image.onload = function() {
      var w = this.width,
        h = this.height,
        t = file.type, // ext only: // file.type.split('/')[1],
        n = file.name,
        s = ~~(file.size / 1024) + 'KB';
      $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
    };

    image.onerror = function() {
      alert('Invalid file type: ' + file.type);
    };
  };

}
$("#choose").change(function(e) {
  if (this.disabled) {
    return alert('File upload not supported!');
  }

  var F = this.files;
  if (F && F[0]) {
    for (var i = 0; i < F.length; i++) {
      readImage(F[i]);
    }
  }
});

#uploadPreview img {
  height: 64px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

Answer 1

您可以在每次输入更改时添加文件。在验证文件名是否存在于附加数组上时

// var url = window.URL || window.webkitURL; // alternate use

function readImage(file) {
  var reader = new FileReader();
  var image = new Image();

  reader.readAsDataURL(file);
  reader.onload = function(_file) {
    image.src = _file.target.result; // url.createObjectURL(file);
    image.onload = function() {
      var w = this.width,
        h = this.height,
        t = file.type, // ext only: // file.type.split('/')[1],
        n = file.name,
        s = ~~(file.size / 1024) + 'KB';
      $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
    };

    image.onerror = function() {
      alert('Invalid file type: ' + file.type);
    };
  };

}
var arr = [];
$("#choose").change(function(e) {
  if (this.disabled) {
    return alert('File upload not supported!');
  }

  var F = this.files;
  if (F && F[0]) {
      let filename = F[0].name.replace('','_');
      if(arr.indexOf(filename) > -1){
         console.log('Already exist')
      }else{
      arr.push(filename)
      for (var i = 0; i < F.length; i++) {
        readImage(F[i]);
     }
     }
  }
});

#uploadPreview img {
  height: 64px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>