event.preventDefault () при вводе файла не работает - PullRequest
Новая
       98

event.preventDefault () при вводе файла не работает

0 голосов
/ 30 января 2020

HTML

<input id="file-upload" name="files" type="file" multiple="">

JavaScript

if (inputType === "file") {
  console.log(event);
  event.preventDefault();
  console.log(event.target.files);

  /* do other stuff */
}

Когда я выбираю файл, его имя отображается рядом с вход, а также он добавляется к FileList входа, так что именно предотвращает event.preventDefault()? : /

animated gif showing input

Цель (по крайней мере, по крайней мере)

Разрешить пользователям выбирать файлы, но останавливать по умолчанию выберите файлы и добавьте их в FormData вручную, а также (это приятно иметь) список файлов, выбранных для загрузки, создав на лету несколько HTML .

1 Ответ

1 голос
/ 30 января 2020

На самом деле нет никакого действия по умолчанию для события изменения входа, поэтому вызов метода warnDefault () для этого события не будет иметь эффекта.

РЕДАКТИРОВАТЬ:

Объект FileList не может быть изменен, так как вы можете изменить коллекцию файлов?

Что ж, ответ довольно прост.

  1. Объявление и инициализация пользовательского массива FileList

    var selectedFiles= [];

  2. В событии onChange, добавьте выбранные файлы к этой переменной: 

    array.forEach(e.target.files, (file) => {
        selectedFiles.push(file);
   });

  3. Добавьте переменную к FormData и отправьте 

    let formData = new FormData(document.querySelector('#request-for-change-form'));

// Creates a new request
var request = new XMLHttpRequest();
request.open("POST", "{your action here}");

// Append the files to the formdata
for (var i = 0; i < selectedFiles.length; i++) {
  formData.append("files[]", selectedFiles[i]);
}

// Submit the form
request.send(formData);
...