Загрузка файла Blueimp jQuery, передача данных дополнительной формы

Я мог бы использовать некоторую помощь … Мне удалось сделать работу по загрузке файла jimpi для javascript для меня, но я все еще определенно новичок в этом, я очень мало знаю о jQuery и т. Д., Поэтому, пожалуйста, попробуйте дать мне это как ясное и простой как возможно. Я постараюсь быть конкретным.

Хорошо … То, что я хотел бы достичь, заключается в том, что люди могут загружать фотографии, и с каждой фотографией выбирают дополнительные параметры (через раскрывающееся меню ) и добавляют дополнительные сведения (через текстовое поле ввода ). Эти дополнительные поля формы передаются в массиве (-ах) вместе с массивом файлов, которые загружаются. Каждое из названий файлов вместе с их соответствующим выбором меню и деталями в конечном итоге будет храниться в динамически создаваемом XML или текстовом файле вместе с загруженными фотографиями.

Я знаю, что подобные вопросы возникли до github, и я видел такие решения, как этот (https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data ), но я использую последний плагин версии и не могу найти эквивалентный код для этого в любом из моих файлов.

До сих пор я добавил:

• Перемещение XML в PHP
• Разбирайте XML последовательно в PHP
• Выбрать узел на основе атрибута и изменить поднод
• Получение элемента SimpleXMLElement для включения кодирования в вывод
• как получить значение времени из плейлиста youtube

<td><b>Package:</b> <select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select> </td> <td> <input type="text" name="notes[]"> </td> 

в файл index.html (после кода кнопки «Удалить») и переместил тег закрывающей формы, чтобы после сценария загрузки шаблона включить эти поля. Я знаю, что это не большой прогресс.

Вот большая часть index.html

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme"> <link rel="stylesheet" href="../jquery.fileupload-ui.css"> <link rel="stylesheet" href="style.css"> <h2>File Upload</h2> <div id="fileupload"> <form action="upload.php" method="POST" enctype="multipart/form-data"> <div class="fileupload-buttonbar"> <label class="fileinput-button"> <span>Add files...</span> <input type="file" name="files[]" multiple> </label> <button type="submit" class="start">Start upload</button> <button type="reset" class="cancel">Cancel upload</button> <button type="button" class="delete">Delete files</button> </div> //</form> originally here, moved below <div class="fileupload-content"> <table class="files"></table> <div class="fileupload-progressbar"></div> </div> </div> <script id="template-upload" type="text/x-jquery-tmpl"> <tr class="template-upload{{if error}} ui-state-error{{/if}}"> <td class="preview"></td> <td class="name">${name}</td> <td class="size">${sizef}</td> {{if error}} <td class="error" colspan="2">Error: {{if error === 'maxFileSize'}}File is too big {{else error === 'minFileSize'}}File is too small {{else error === 'acceptFileTypes'}}Filetype not allowed {{else error === 'maxNumberOfFiles'}}Max number of files exceeded {{else}}${error} {{/if}} </td> {{else}} <td class="progress"><div></div></td> <td class="start"><button>Start</button></td> {{/if}} <td class="cancel"><button>Cancel</button></td> </tr> </script> <script id="template-download" type="text/x-jquery-tmpl"> <tr class="template-download{{if error}} ui-state-error{{/if}}"> {{if error}} <td></td> <td class="name">${name}</td> <td class="size">${sizef}</td> <td class="error" colspan="2">Error: {{if error === 1}}File exceeds upload_max_filesize (php.ini directive) {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive) {{else error === 3}}File was only partially uploaded {{else error === 4}}No File was uploaded {{else error === 5}}Missing a temporary folder {{else error === 6}}Failed to write file to disk {{else error === 7}}File upload stopped by extension {{else error === 'maxFileSize'}}File is too big {{else error === 'minFileSize'}}File is too small {{else error === 'acceptFileTypes'}}Filetype not allowed {{else error === 'maxNumberOfFiles'}}Max number of files exceeded {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size {{else error === 'emptyResult'}}Empty file upload result {{else}}${error} {{/if}} </td> {{else}} <td class="preview"> {{if thumbnail_url}} <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a> {{/if}} </td> <td class="name"> <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a> </td> <td class="size">${sizef}</td> <td colspan="2"></td> {{/if}} <td class="delete"> <button data-type="${delete_type}" data-url="${delete_url}">Delete</button> </td> <td><b>Package:</b> <select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select> </td> <td> <input type="text" name="notes[]"> </td> </tr> </script> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> <script src="../jquery.iframe-transport.js"></script> <script src="../jquery.fileupload.js"></script> <script src="../jquery.fileupload-ui.js"></script> <script src="application.js"></script> 

Я не могу много думать о upload.php , о том, где массивы files [] анализируются для имен файлов и т. Д., И я не уверен, где можно получить массивы пакетов [] и notes [], итерации через них , и как поместить всю эту информацию в текстовый / XML-файл.

Может ли кто-нибудь с небольшим терпением и некоторым опытом работы с этим плагином / эти проблемы будут проходить через следующие шаги? Большое спасибо за Вашу помощь.

  $('[name=files\\[\\]]').fileupload({ //...your initialization of the file uploader here }).bind('fileuploadsubmit', function (e, data) { data.formData = { 'package': $('[name=package\\[\\]]').val(), 'notes': $('[name=notes\\[\\]]').val() }; }); 

 $('#fileupload').fileupload({ formData: { param1: 'test' ,param2: "value2" ,param3: "yasseshaikh" } });