jQuery 文件上传插件，多个文件和表单数据

Question

我在实施 jQuery 文件上传插件 (https://github.com/blueimp/jQuery-File-Upload/wiki/Options) 时遇到问题。

我的表单有一个设置为多个的文件字段和一些常规输入字段。我正在使用 PHP 来处理服务器端的表单。

当我select 几个大文件上传并提交表单时似乎出现了问题，在这种情况下 $_POST 和 $_FILES 数组为空。

我无法弄清楚发生这种情况的确切时间 - 起初我认为这是在 select 处理大文件时发生的，因此文件的总大小超过了我的最大文件大小上传限制, 但似乎并非如此。

问题似乎出在客户端，因为在这些情况下似乎根本没有表单数据发送到服务器。

有没有人遇到过这个问题，有解决办法吗？

更新

问题似乎是，如果提交大小大于允许的最大上传大小，PHP 会删除 $_POST 和 $_FILES 中的所有数据。我的理解是这个插件可以发出多个请求来上传多个文件以避免这个问题，但是无论我使用什么设置我都无法让它工作。

所以，让我试着更好地解释一下我想要实现的目标。用户可以在表单中输入信息，也可以选择附加任意数量的文件。每个文件的文件大小不得大于允许的最大上传限制，但用户 select 的多个文件的总文件大小可能会超过最大值。在这种情况下，我希望插件向服务器发出多个请求，确保每个请求都低于大小限制。但我无法让它发挥作用。只提出过一个请求。

这是我的代码的当前版本

$('#applicationform').fileupload({
    autoUpload: false,
    singleFileUploads: false,
    //limitMultiFileUploads: 3,
    //sequentialUploads: true,
    //limitMultiFileUploads: 3,
    //limitMultiFileUploadSize: 1000000,
    dataType: 'json',
    progress: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
    },
    add: function (e, data) {
        $("#applicationform-submit").off('click').on('click', function (e) {
            e.preventDefault();
            data.formData = $("#applicationform").serializeArray();  
            data.submit();
            console.log("submit", data.files);
        });
    });

服务器使用插件提供的 php 代码将文件保存到服务器，每个请求 returns 一个 JSON 数组，其中包含用户上传的文件。例如：

{"files":[{"name":"Screen Shot 2017-07-24 at 20.28.48 (3).png","size":1289712,"type":"image\/png","url":"[snip]","thumbnailUrl":"[snip]","deleteUrl":"[snip]","deleteType":"DELETE"}]}

Answer 1

如果您不共享任何代码，就很难回答您的问题。但是这段代码对我自己来说似乎工作得很好。

也许这段代码可以帮到你：

var yourFilesList = [],
yourParameters = [],
elem = $("yourform");
file_upload = elem.fileupload({
    formData:{extra:1},
    autoUpload: false,
    fileInput: $("input:file"),
}).on("uploadadd", function(e, data) {
    yourFilesList.push(data.files[0]);
    yourParameters.push(e.delegatedEvent.target.name);
});

$("sendbutton").click(function(e) {
    e.preventDefault();
    file_upload.fileupload('send', {files:yourFilesList, paramName: yourParameters});
})

Answer 2

您应该将 maxChunkSize 设置为低于 post_max_size 和 php.ini 中的 upload_max_filesize 只有 maxChunkSize 将大文件拆分为多个请求。

示例：

$('#applicationform').fileupload({
    maxChunkSize: 10*1024*1024, // 10 MB <--- 
    ...
    });

jQuery 文件上传插件，多个文件和表单数据

jQuery file upload plugin, multiple files and form data

javascript

php

jquery

forms

jquery-file-upload