Question

我的前端正在使用blueimps file-upload jquery插件。

我有一个文件上传表单，您可以在其中选择多个文件。此表单具有在所有文件之间共享的公共输入字段。该框架使用公共输入单独处理每个文件。

我现在要求我有一个特定于每个文件的输入作为表单的一部分。如何动态发布每个文件上传的正确输入？

情景：

我有一个名为＆＃34的重复输入类型;评论＆＃34;。（每个文件评论）每个文件都存在此输入。默认情况下，每个文件的输入名称相同，它在服务器端将我的模型对象绑定为分隔字符串。我可以绑定到该字段的增量（例如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);
    }
});

干杯，巴蒂尔。：

唯一标识每个文件上传请求的常见html输入

1 个答案: