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

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 attributes) 到一个“全局”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 并推送所有文件？

谢谢，