带分块的程序化文件上传：仅发送第一个文件答案

【问题标题】：Programmatic file upload with chunking: Only the first file is sent带分块的程序化文件上传：仅发送第一个文件
【发布时间】：2013-08-21 22:33:54
【问题描述】：

当使用启用分块的jQuery-File-Upload plugin 执行programmatic file upload 时，我无法发送多个文件。

我按如下方式拨打电话：

fileUploadWidget.fileupload('send',
{
    files: filesList
})

filesList 是 File 对象的列表。

我还设置了 maxChunkSize 并将 singleFileUploads 设置为 true（我也尝试过 false），如 Options wiki page 所示。

有没有人成功地让它工作？

更新：

我在 GitHub 上为这个问题创建了一个issue，这是作者的回复：

[...] 分块上传仅支持每个请求一个文件。也就是说，您仍然可以同时分块上传多个文件，但您必须为此发送多个请求。

我们的解决方案：

正如已经评论过的，我们最终做的是在循环中发送文件，其中widget 被初始化，sequentialUploads 设置为true（你需要这个取决于你的后端如何已配置）：

// for illustration only
// does not do anything with the returned jqXHR objects
for (i = 0; i < files.length; i++) {
    widget.fileupload('send', { files: files[i] });
}

【问题讨论】：

您是否尝试过改用Plupload？我最近做了很多关于多个文件上传的工作，发现这个插件正是我需要的。

标签： jquery file-upload blueimp

【解决方案1】：

如果你使用 C# 作为后端，你可以试试这个（客户端，JQuery）：

 $("#btnUpload").click(function () { // btnUpload is the ID of any button for upload
            var formdata = new FormData(); //FormData object
            var fileInput = document.getElementById('fileInput');
            //Iterating through each files selected in fileInput
            for (i = 0; i < fileInput.files.length; i++) {
                //Appending each file to FormData object
                formdata.append(fileInput.files[i].name, fileInput.files[i]);
            }
            //Creating an XMLHttpRequest and sending
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/UploadMethod'); // UploadMethod is your back-end code
            xhr.send(formdata);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // alert("uploaded");
                    }
            }

        });

然后在您的 UploadMethod 中执行以下操作：(ServerSide , C#)

public void Upload()
        {
            for (int i = 0; i < Request.Files.Count; i++)
            {
                HttpPostedFileBase file = Request.Files[i]; //Uploaded file
                //Use the following properties to get file's name, size and MIMEType
                int fileSize = file.ContentLength;
                string fileName = file.FileName;
                string mimeType = file.ContentType;
                System.IO.Stream fileContent = file.InputStream;
                //To save file, use SaveAs method
                var appPath = HostingEnvironment.ApplicationPhysicalPath + "Documents/" + "_" +  DateTime.Now+ fileName;

                file.SaveAs(appPath); //File will be saved in Documents folder
              }
        }

【讨论】：

【解决方案2】：

foreach(files in filesList.length)
{
    fileUploadWidget.fileupload('send',
    {
        files:filesList
    }
}

也许不是完全正确的格式，但你明白了:)

【讨论】：

【解决方案3】：

你应该这样做：

$('collection object').each(function () {
$(this).fileupload({'send',
    files: $(this)
});
});

【讨论】：

【解决方案4】：

你基本上是循环发送它们。

【讨论】：

【解决方案5】：

我认为问题出在您的 html 上。对文件字段使用类似的东西

<input type='file' name="pics[]" />

name 属性应该是数组，然后你可以从后端循环获取

【讨论】：