Я работаю над веб-загрузчиком, однако, я нашел что-то, я не знаю, если это проблема. Вот что я нашел:
Когда я выбираю файлы с <input type="file" multiple> , значения всех выбранных файлов хранятся в списке файлов, который находится внутри INPUT. Однако, когда я добавляю больше файлов, файлы, которые я выбираю, заменяют те, которые я выбрал ранее. Я думаю, что это поведение по умолчанию этого элемента DOM.
Что мне нужно сделать, если я хочу добавить больше файлов, не удалив ранее выбранных?
Кто-нибудь знает как это сделать?
Btw: Извините за мой плохой английский, это не мой родной язык. Спасибо.
Вы можете следить за всеми FileList и перебирать их при отправке через ajax: http://jsfiddle.net/46Pk8/ . Однако имейте в виду, что вы можете выбрать (и загрузить) файл более одного раза таким образом. Лучшим способом было бы иметь визуальный список и позволить пользователю добавлять / удалять файлы в / из списка.
var files = []; // this will contain FileLists $("button:first").on("click", function(e) { $("<input>").prop({ "type": "file", "multiple": true }).on("change", function(e) { files.push(this.files); }).trigger("click"); }); $("button:last").on("click", function(e) { var xhr = new XMLHttpRequest(); xhr.open("POST", "/echo/html/", true); var data = new FormData(); $.each(files, function() { // each FileList $.each(this, function() { // each file inside this list console.log("appending %s", this.name); data.append("files", this); }); }); xhr.onreadystatechange = function(e) { if(xhr.readyState === 4) { console.log("done"); } }; xhr.send(data); });
В качестве обходного пути вы можете вставить другой input после выбора файла и скрыть исходный.