Ограничить количество файлов для загрузки

Question

У меня код, который добавляет файлы изображений для загрузки и создаёт их предпросмотр (миниатюры). Проблема в том, что можно добавлять файлы не ограниченное количество.

function handleFileSelect(evt) {
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
    if (!f.type.match('image.*')) {
      continue;
    }
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        var span = document.createElement('span');
        span.innerHTML = [
          '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',
          e.target.result,
          '" title="', escape(theFile.name),
          '"/>'
        ].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);
    reader.readAsDataURL(f);
  }
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />
<output id="list"></output>

Как мне сделать ограничение для загрузки, чтобы добавлялось не больше трёх файлов?

Answer 1

Почему бы не использовать переменную для этого?

let list = [];

function handleFileSelect(evt) {
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
    if (list.length > 2) return;
    if (!f.type.match('image.*')) {
      continue;
    }
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        list.push(theFile.name);
        var span = document.createElement('span');
        span.innerHTML = [
          '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',
          e.target.result,
          '" title="', escape(theFile.name),
          '"/>'
        ].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);
    reader.readAsDataURL(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />
<output id="list"></output>

Answer 2

Описание

Решил проблему, исправил многое - стиль кода, надежность, оптимизацию, читабельность.

Решение

const reader = new FileReader();
const limit = 3;
document.getElementById('files').addEventListener(`change`, async(event) => {
  const files = event.target.files;
  if (files === null) return;
  for (let index = 0, count = 0; index < files.length && count < limit; index++) {
    const file = files[index];
    if (!file.type.match(`image.*`)) continue;
    const controller = new AbortController();
    const promise = new Promise((resolve, reject) => {
      reader.addEventListener(`load`, (event) => {
        resolve(event.target.result);
      }, { signal: controller.signal });
      reader.addEventListener(`error`, (event) => {
        reject(event.target.result);
      }, { signal: controller.signal });
    });
    promise.finally(() => {
      controller.abort();
    });
    reader.readAsDataURL(file);
    const url = await promise;
    const span = document.getElementById('list').insertBefore(document.createElement('span'), null);
    span.innerHTML = `<img style="height: 75px; border: 1px solid #000; margin: 5px" src="${url}" title="${escape(file.name)}"/>`;
    count++;
  }
});

<input type="file" id="files" multiple />
<output id="list"></output>

БЛОГ НА HUSL

Ограничить количество файлов для загрузки

Ответы (2 шт):

Описание

Решение