Как добавить объект File в коллекцию FileList в JavaScript?

Я работаю над полем загрузки файла перетаскивания.

Я могу вернуть объект FileList, содержащий файл, который был указан пользователем. У меня есть скрытое поле ввода файла, в которое я затем хочу добавить объект файла, чтобы я мог затем отправить данные формы через AJAX.

Проблема в том, что я не могу скопировать объект файла в поле ввода файла. Вот как я это делаю:

var files = evt.dataTransfer.files; // FileList object.
var fileUploadElem = document.getElementById(fileUploadId);

// trying to copy the first file of files into the file upload field
fileUploadElem.files[0] = files[0];

// this statement returns '0' instead of '1'
console.log('fileUploadElem length: '+fileUploadElem.files.length);

Цените любые советы или указатели.

Источник

2 ответа

Решение

Причина, по которой он не работал для меня, заключалась в том, что одно из свойств JavaScript не поддерживается в Chrome, поэтому оно работало на компьютере моего коллеги, который работал в браузере Firefox, но не для меня.

Источник

Это пример из MDN о том, как сделать это с FormData:

function sendForm() {
  var output = document.getElementById("output");
  var data = new FormData(document.getElementById("fileinfo"));

  data.append("CustomField", "This is some extra data");

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "stash.pl", false)
  xhr.send(data);
  if (xhr.status == 200) {
    output.innerHTML += "Uploaded!<br />";
  } else {
    output.innerHTML += "Error " + xhr.status + " occurred uploading your file.<br />";
  }
}
Источник
Другие вопросы по тегам