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

我正在尝试使用blueimp/jQuery 文件上传 https://github.com/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/API
• https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form 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>

uploadable.push(data.files[0])

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

谢谢你，