Загрузка нескольких файлов из нескольких полей ввода программно – blueimp jquery fileupload

Я пытаюсь использовать плагин blueimp / jQuery-File-Upload для хранения изображений на сервере с помощью обработчика загрузки PHP. Я слежу за этими сообщениями, чтобы заставить его работать:

• https://github.com/blueimp/jQuery-File-Upload/wiki/API
• https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form
• Посылка нескольких полей ввода файла программно в одном виде
• Загрузка файла BlueImp jQuery: как использовать параметр fileInput, чтобы fileupload () мог связывать новые динамически добавленные входы?

Форма загрузки файла, которую я использую, имеет несколько динамически добавленных полей ввода файла. Например, после добавления 3 полей:

• Необычные действия SimpleMODAL OSX в Foreach Loop
• данные не извлекаются через formdata
• Как фильтровать результаты автозаполнения в текстовых полях
• Живое уведомление JQuery
• Как написать dustjs в php-коде без nodejs

<form id="entry_form" class="entry-form" role="form"> <div class="entry"> ... <input type="file" class="file-upload" name="files0[]" multiple> ... </div> <div class="entry"> ... <input type="file" class="file-upload" name="files1[]" multiple> ... </div> <div class="entry"> ... <input type="file" class="file-upload" name="files2[]" multiple> ... </div> </form> <div class="col-xs-6 col-sm-4"> <button id="save_btn" class="btn btn-lg btn-block">Save</button> </div> 

Я могу успешно загружать файлы из этих полей, используя следующий JS-код:

 var imageUpload = { init: function (selector, context, options) { selector = selector || '.file-upload'; context = context || $('.entry'); var filesList = []; var url = site_url + '/doUpload'; $(selector).fileupload(options || { url: url, type: 'POST', dataType: 'json', autoUpload: false, singleFileUploads: false, formData: {}, add: function (e, data) { for (var i = 0; i < data.files.length; i++) { filesList.push(data.files[i]); } return false; } }).on('change', function () { $(this).fileupload('add', { fileInput: $(selector) }); }); $('#save_btn').click(function (e) { e.preventDefault(); $(selector).fileupload('send', {files: filesList}); }); } }; 

Как вы можете видеть в обратном вызове события «add:» и методе «send» ближе к концу, я отправляю все файлы в один POST на сервер, это назначенная функциональность. Моя проблема в том, что переменная стороне сервера $ _FILES достигает сервера следующим образом:

 $_FILES array[1] [files0] array[1] [name] array[1] [0] string "Collapse.png" [1] string "Expand.png" [2] string "Map.jpg" 

Таким образом, я не могу связать, какое изображение было добавлено к входу. Итак, что мне нужно, чтобы добраться до сервера, это примерно так:

• stop click () из события на созданном ajax входе
• Ошибка $ .ajax не может поймать заброшенное исключение из php
• Получение сериализации данных в php-файле с использованием ajax
• Как использовать Ajax и JSON для создания выпадающего меню?
• Как встроить мой собственный видеоплеер в Facebook?

 $_FILES array[3] [files0] array[1] [name] array[1] [0] string "Collapse.png" [files1] array[1] [name] array[1] [0] string "Expand.png" [files2] array[1] [name] array[1] [0] string "Map.jpg" 

Я искал решение этого на некоторое время и не достиг желаемого результата. Не могли бы вы мне помочь?

Благодаря!

Related of "Загрузка нескольких файлов из нескольких полей ввода программно – blueimp jquery fileupload"

  add: function (e, data) { for (var i = 0; i < data.files.length; i++) { filesList['files'+ i].push(data.files[i]); } 

 var imageUpload = { init: function (selector, context, options) { selector = selector || '.file-upload'; context = context || $('.entry_form'); var filesList = [], paramNames = []; var url = site_url + '/doUpload'; $(selector, context).fileupload(options || { url: url, type: 'POST', dataType: 'json', autoUpload: false, singleFileUploads: false, add: function (e, data) { for (var i = 0; i < data.files.length; i++) { filesList.push(data.files[i]); paramNames.push(e.delegatedEvent.target.name); } return false; }, change: function (e, data) { }, done: function (e, data) { } }); $('#save_btn').click(function (e) { e.preventDefault(); $(selector, context).fileupload('send', {files:filesList, paramName: paramNames}); }); } };