javascript - 带有表单数据的 Blueimp 多 block 上传

Question

我想用表单数据分块上传多个文件。将表单数据保存到数据库，将图像保存到特定文件夹。

我正在使用 blueimp 上传 here is my Fiddle .

我正在使用的 JavaScript 代码

$(function () {
    $('#fileupload').fileupload({
        maxChunkSize: 5000,
        previewMaxHeight: 210,
        previewMaxWidth: 210,
        url: '/echo/json'
    });
    $('#fileupload').bind('fileuploadsubmit', function (e, data) {
        var inputs = data.context.find(':input');
        if (inputs.filter('[required][value=""]').first().focus().length) {
            return false;
        }
        data.formData = inputs.serializeArray();
    });
});

block 上传工作正常，但如果我将数据保存到数据库，则会创建多个条目。 在数据库中创建的条目数等于上传的 block 数。

我正在使用的 PHP 代码是(借助 blueimp PHP 类 https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php)

public function postUpload()
{
    $upload_handler = new UploadHandler(); // Blueimp class

    $this->file->create(Input::all()); // This code is executed multiple times

}

所以主要的问题是 $this->file->create(Input::all()); 代码会根据上传的 block 数执行多次，正如我希望的那样文件上传成功时执行一次。

还想为上传的文件命名文件以将其保存到数据库。

Answer 1

您需要先上传所有 block ，然后在最后一个 block 上执行您自己的逻辑。因此，这是您可以执行此操作的方法。

您应该首先从 http header Content-Range 中提取范围信息。你可以看看this answer如何。然后你应该检查这是否是最后一个 block 。

如果它是最后一个 block ，您只需在那里执行您的业务逻辑。

即使是迟到的答案，也可能对某人有所帮助。