Ajax Несколько загрузок

Question

Я видел множество способов сделать то же самое, и некоторые сценарии просто не переплетаются друг с другом от jQuery до простых JavaScript и ajax, что довольно путаница.

В любом случае Я нашел этот сценарий загрузки, который загружает только отдельные файлы, и я ставлю перед собой задачу превратить его в загрузчик нескольких файлов, и у меня возникает эта маленькая проблема каждый раз, когда я пытаюсь изменить несколько переменных, которые я читаю, для анализа моего сценария php с этим верхние строки ниже.

function uploadFile(){

var file = _("file").files[0]; //This line is the issue, changed it around still gave null errors

var formdata = new FormData();

formdata.append("file1", file);
var ajax = new XMLHttpRequest();

и мой HTML выглядит следующим образом

<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
</form>

Я пытался каждую переменную не выдавать ошибки, и все же я получаю объект или переменную и нулевые ошибки.

Редактировать

Это то, с чем я работал, и это часть, которая дает проблемы, у меня больше функций, но они по-разному связаны с выводом файла синтаксического анализа php в обрабатывать индикатор выполнения и обработку ошибок. эта часть ниже - то, что я переключался со вчерашнего дня без успеха. @EmielZuurbier Я пытался отключить ваш аддон и все еще сообщения об ошибках о том, что uploadFile не является переменной et c.

   }

   function uploadFile(){
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", “plistingscript.php");
    ajax.send(formdata);
    }

Answer 1

Линия _("file").files[0] не принесет пользы. Я предполагаю, что _ является заменой для $ из jQuery. Он создаст объект jQuery с элементами, найденными запросом "file", и найдет свойство files для этого объекта, которого там нет.

Но часть FormData хороша, и вам следует продолжайте использовать это. При объединении FormData с элементом <form> вы можете мгновенно получить все данные из формы, используя форму в качестве аргумента для FormData.

Чтобы разрешить загрузку нескольких файлов на один * Элемент 1013 *, добавьте атрибут multiple, чтобы можно было выбрать более 1 файла.

<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1" multiple><br>
  <input type="button" value="Upload File">
</form>

const form = document.getElementById('upload_form');

function onSubmit(event) {
  const formData = new FormData(form);
  fetch('plistingscript.php', {
    method: 'POST',
    body: formData
  });
  event.preventDefault();
}

form.addEventListener('submit', onSubmit);