Уникальный идентификатор общего входа HTML для запроса на загрузку файла

Question

Мой внешний интерфейс использует плагин jimery для загрузки файлов blueimps.

У меня есть форма для загрузки файлов, где вы можете выбрать несколько файлов. Эта форма имеет общие поля ввода, разделяемые между всеми файлами. Структура обрабатывает размещение каждого файла по отдельности с помощью общих входов.

У меня теперь есть требование, когда у меня есть вход, который является конкретным для каждого файла как часть формы. Как я могу динамически отправлять правильный ввод на загрузку файла?

Сценарий:

У меня есть дублированный тип ввода имени "комментарий". (Комментарий к файлу) Этот вход существует для каждого файла. По умолчанию, поскольку входной файл имеет одно и то же имя для каждого файла, он привязывается на стороне сервера к моему объекту модели как разделительная строка. Я мог бы привязываться к приращениям этого поля (например, comment1, comment2, comment3), но это не чистое решение.

На стороне клиента, как я могу опубликовать правильный входной комментарий для комментариев?

Спасибо, Шейн.

Answer 1

ОК. Для тех, кто использует базовый плагин и нуждается в вышеуказанном требовании, вот оно.

Для каждого добавляемого файла я динамически добавляю строку таблицы с конкретными вводами файлов.

Перед моими изменениями плагин опубликовал форму со всеми входами. Входы, специфичные для файла, имеют одно и то же имя и принимаются как строковый массив на стороне сервера.

Что я сделал, чтобы изменить это было на callback add(), я назначил контекст этой новой уникальной строке таблицы. Затем на submit я нахожу все входные данные конкретного файла из контекста и всех входов общей формы с помощью уникального идентификатора.

Затем я сериализую оба и объединим их вместе, прежде чем назначать обратно formData.

Пример:

Общие входы в виде:

<table id="commonFields" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
       <td> 
       <form:label path="firstName"> 
         <spring:message code="fileupload.upload.member.input.firstname.label"/> 
         <form:errors path="firstName" cssClass="error" /> 
       </form:label> 
       <form:input path="firstName" size="30"/> 
       </td> 
       <td> 
       <form:label path="lastName"> 
         <spring:message code="fileupload.upload.member.input.lastname.label"/> 
         <form:errors path="lastName" cssClass="error" /> 
       </form:label> 
       <form:input path="lastName" size="30"/> 
       </td> 
      </tr> 
      </table> 

Javascript фрагмент

$('#fileuploadForm').fileupload({ 
    dataType: 'json', 
     add: function (e, data) { 
      $.each(data.files, function (index, file) { 
       var rowCount = $('#fileUploadTable tr').length; 
       $('#fileUploadTable tr:last').after('<tr id=' + rowCount + ' ><td>' + file.name + '</td><td><span class="field"></span></td><td><input type="text" size="30" value="" name=comment></td><td>' + file.size + '</td> <td>Ready to upload</td></tr>'); 
       data.context = $('#' + rowCount + ''); 
      }); 
     $("#upload").click(function() { 
       data.submit(); 
      }); 
    }, 
    submit: function (e, data) { 
     //this will overwrite all the form data posted to the server 
     //may need to find all inputs and selects too 
     var fileSpecificFields = data.context.find(':input').serializeArray(); 

     var commonFieldInputs = $('#commonFields').find(':input').serializeArray(); 
     data.formData = $.merge(commonFieldInputs, fileSpecificFields); 
    } 
}); 

Приветствия, Шейн. :