Как предотвратить загрузку дублированных изображений для предварительного просмотра перед загрузкой

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);
        };
    };
}