У меня есть форма со следующей формой:
<form> ... <input type="file" multiple="multiple" id="images" /> <a id="add">Add</a> ... <input type="submit" value="Submit" /> </form> Событие click элемента add затем подключается так:
var images = []; $("#add").click(function() { var files = $("#images")[0].files; for (var i = 0; i < files.length; i++) { images.push[files[i]; } $("#images").val(""); });
Это позволяет мне добавлять изображения из нескольких мест. Теперь мне нужно отправить файлы обратно на сервер. Я нашел следующий вопрос:
Передача пути к загруженному файлу из HTML5 drag & drop в поле ввода
Кажется, что это похоже. Поэтому я использовал следующее, чтобы связать событие при отправке формы:
var form = $("form"); form.submit(function() { for (var i = 0; i < images.length; i++) { var reader = new FileReader(); reader.onload = function(e) { $("<input>").attr({ type: "hidden", name: "images[]" }).val(e.target.result).appendTo(form); }; reader.readAsDataURL(images[i]); } });
Наконец, на сервере у меня есть следующий код:
print_r($_POST); print_r($_FILES);
Однако ни одна коллекция не содержит элемент для представленных изображений. Мне было интересно, что я делаю неправильно? благодаря
Хорошо, я думаю, ваша проблема здесь вызвана обработчиком событий load FileReader , который добавляет эти URL-адреса данных в форму, вызывается после отправки формы на сервер.
Вы можете решить эту проблему и покончить с избыточной обработкой images и submit обработчик событий, добавив эти элементы в форму в обработчике click для ссылки «Добавить». Вы также можете использовать эту возможность, чтобы выполнить небольшую проверку на стороне клиента, не позволяя дублировать URL-адреса данных на сервер, и даже добавить параметр предварительного просмотра / удаления для выбранных изображений.
Кроме того, вы можете удалить ссылку «Добавить», заменив обработчик click обработчиком change прикрепленным к file ввода.
Изменить (nfplee):
var images = []; $("#add").click(function() { var files = $("#images")[0].files; for (var i = 0; i < files.length; i++) { var reader = new FileReader(); reader.onload = (function(file) { return function(e) { images.push({ name: file.name, file: e.target.result }); }; })(files[i]); reader.readAsDataURL(files[i]); } $("#images").val(""); }); var form = $("form"); form.submit(function() { for (var i = 0; i < images.length; i++) { $("<input>").attr({ type: "hidden", name: "images[" + i + "][name]" }).val(images[i].name).appendTo(form); $("<input>").attr({ type: "hidden", name: "images[" + i + "][file]" }).val(images[i].file).appendTo(form); } });