以一种形式以编程方式发送多个文件输入字段

Question

我正在尝试使用blueimp/jQuery-File-Upload插件以编程方式通过相同的表单发送多个文件输入字段.

当用户选择表单文件时,它只是将它们附加到JS变量中,以便$('#form').fileupload('send')在表单提交时使用方法进一步发送它们.我的目标是以异步方式使用之前使用的完全相同的同步形式.因此,当用户单击表单提交按钮时,它会阻止默认操作,他们让插件执行任务,发送所有表单数据并显示整体上载进度.

我主要关注这些指南:

• https://github.com/blueimp/jQuery-File-Upload/wiki/API
• https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

实际上它几乎正常工作,但它不会向服务器端发送多个输入文件.在fileuploadadd事件我推着data.files[0](我的文件输入只能单一的文件,但他们每个人用不同的accept属性),以"全球" uploadable阵列,然后提交表单我使用类似$('#form').fileupload('send', {files: uploadable}).

我想我没有采用正确的方式,因为只有一个文件与表单数据一起发送.使用单个表单以编程方式发送多个文件输入文件的正确方法是什么？

我对整体上传进度也不太自信...如果我使用fileuploadprogressall事件来阅读上传进度,它会报告所有上传文件的进度吗？

JS(简化)

$(function () {
    var uploadable = [];

    $('#form').fileupload({
        autoUpload: false,
        singleFileUploads: false,
        add: function (event, data) {
            uploadable.push(data.files[0]);

            return false;
        },
        // other event callbacks
    })
        .prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

    $('#form').submit(function (event) {
        event.preventDefault();

        $('#form').fileupload('send', {files: uploadable});
    });
});

HTML

<form id="form" action="upload" method="post" enctype="multipart/form-data">
  <!-- other text/hidden inputs that will also be sent -->
  <input type="file" name="image" id="image" accept="image/*" />
  <input type="file" name="video" id="video" accept="video/*" />
</form>

Answer 1

uploadable.push(data.files[0])

你生动地告诉编译器只推送第一个文件。
您是否尝试过使用 foreach 并推送所有文件？

谢谢你，