唯一標識每個文件上傳請求的常見html輸入

Question

我的前端使用blueimps文件上傳jquery插件。

我有一個文件上傳表單，您可以在其中選擇多個文件。這種形式在所有文件中共享共同的輸入字段。框架使用通用輸入單獨處理每個文件。

我現在有一個要求，我有一個輸入是特定的每個文件作爲窗體的一部分。我如何動態發佈每個文件上傳的正確輸入？

場景：

我有一個名爲「comment」的重複輸入類型。 （每個文件的評論） 此輸入對每個文件都存在。默認情況下，由於每個文件的輸入是相同的名稱，它將作爲分隔字符串在服務器端綁定到我的模型對象。我可以綁定到此字段的增量（例如comment1，comment2，comment3），但這不是一個乾淨的解決方案。

在客戶端，我如何發佈正確的文件相關評論輸入？

謝謝， 謝恩。

Answer 1

好的。對於任何使用基本插件並需要上述要求的人，在這裏。

對於我添加的每個文件，我都動態地添加一個具有文件特定輸入的表格行。

在我更改之前，該插件發佈了包含所有輸入的表單。文件特定的輸入具有相同的名稱，並在服務器端以字符串數組的形式接收。

我做了什麼改變這是在回調add（），我分配上下文到新的唯一表行。 然後在提交時，我從上下文中找到所有文件特定的輸入，並通過唯一的id找到所有常見的表單輸入。

然後，我將它們序列化並將它們合併在一起，然後再分配回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); 
    } 
}); 

乾杯， 沙恩。 ：