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

【问题标题】：Sending multiple file input fields programmatically in one form以一种形式以编程方式发送多个文件输入字段
【发布时间】：2014-11-11 22:15:52
【问题描述】：

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

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

我主要遵循这些指南：

实际上它几乎可以工作，但它不会向服务器端发送多个输入文件。在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>

【问题讨论】：

你得到解决方案了吗？

标签： javascript jquery file-upload jquery-file-upload

【解决方案1】：

uploadable.push(data.files[0])

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

谢谢，

【讨论】：