Question

我正在尝试使用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>

Answer 1

uploadable.push(data.files[0])

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

谢谢，

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

1 个答案: