Хотя Fine Uploader не требует jQuery (или любой другой библиотеки, если уж на то пошло), он имеет необязательную ссылку плагин jQuery. Если вы не против использования jQuery, я предлагаю вам использовать плагин jQuery, так как jQuery значительно упрощает жизнь.

Есть несколько способов снять шкуру с этой кошки. В обоих случаях формула примерно одинакова. То есть позвольте Fine Uploader обрабатывать файлы, создавать элементы ввода «на лету» для каждого отправленного файла, а затем передавать значения этих входных данных обратно в Fine Uploader непосредственно перед тем, как Fine Uploader отправит связанный файл на ваш сервер.

Вариант № 1 — режим FineUploader (с использованием встроенного пользовательского интерфейса)

Используя режим FineUploader:

<div id="myFineUploaderContainer"></div>
<button id="uploadSelectedFiles">Upload Selected Files</button>

$('#myFineUploaderContainer').fineUploader({
   request: {
      endpoint: '/my/upload/endpoint'
   },
   autoUpload: false
})
   .on('submitted', function(event, id, name) {
      var fileItemContainer = $(this).fineUploader('getItemByFileId', id);

      $(fileItemContainer)
         .prepend('<input type="text" name="name">')
         .append('<input type="text" name="description">');
   })
   .on('upload', function(event, id, name) {
      var fileItemContainer = $(this).fineUploader('getItemByFileId', id),
          enteredName = $(fileItemContainer).find('INPUT[name="name"]').val(),
          enteredDescr = $(fileItemContainer).find('INPUT[namme="description"]').val();

      $(this).fineUploader('setParams', {name: enteredName, description: enteredDescr}, id);
   });

$('#uploadSelectedFiles').click(function() {
   $('#myFineUploaderContainer').fineUploader('uploadStoredFiles');
});

Вам, вероятно, потребуется добавить к приведенному выше коду в соответствии с вашими потребностями и добавить CSS, где это необходимо, но это начало в правильном направлении. Выше вы ждете, пока Fine Uploader перезвонит вам, когда он добавит элемент списка в DOM, представляющий выбранный файл. Когда вы получаете этот обратный вызов, вы добавляете элемент ввода текста в начало элемента списка (для введенного пользователем имени) и еще один в конец элемента списка (для введенного пользователем описания. Затем, непосредственно перед Fine Uploader отправляет файл на ваш сервер, он вызывает обработчик события загрузки, где вы считываете значения входных элементов и передаете их Fine Uploader, связывая их с файлом через идентификатор файла. Fine Uploader будет включать эту информацию вместе с файл в закодированном из нескольких частей POST-запросе, который он отправит на ваш сервер.

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

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

Вариант №2 — режим FineUploaderBasic (создайте свой собственный пользовательский интерфейс)

Второй вариант — использовать базовый режим FineUploader. Это дает вам максимальный контроль над вашим пользовательским интерфейсом, но требует большей работы, поскольку вам нужно будет полностью создать свой собственный пользовательский интерфейс. Это означает, что вам нужно будет использовать большинство обратных вызовов, чтобы создать свой пользовательский интерфейс и синхронизируйте его с внутренним состоянием Fine Uploader и связанных файлов.

Например, если вам нужны индикаторы выполнения, вам нужно будет отобразить их самостоятельно и обновить на основе информации, периодически передаваемой вам через обработчик обратного вызова onProgress, вызываемый Fine Uploader. Все это хорошо и, возможно, предпочтительнее в некоторых случаях, если вы хорошо разбираетесь в javascript, HTML и CSS. Однако, если вы этого не сделаете, вы можете попробовать использовать режим FineUploader.

Режим FineUploaderBasic не включает встроенную поддержку перетаскивания, но вы можете легко интегрировать автономный модуль перетаскивания файлов Fine Uploader, если хотите.