javascript - 如何防止上传重复图像)在上传前预览

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

一种可能的解决方案是使用文件数组并防止使用文件名将重复文件添加到该数组中，如下所示:

未经测试的代码

// send this to the server
var files = [];

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';

            var isNewFile = files
               .filter(function(x) { return x.name === file.name; }).length === 0;

            if(isNewFile) {
                files.push(file);
                $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
            }
            else
                alert('Duplicate file: ' + file.name);  
        };

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