如何将Dropzone.js与分块文件上传一起使用(仅限PHP)?

时间:2018-05-17 17:09:41

标签: javascript php jquery dropzone.js dropzone

我可以找到很多关于如何使用各种AP​​I和库来上传chunked文件的文档,但我无法找到如何使用简单的PHP使用Dropzone.js chunked文件上传。

文档很少。我无法在客户端(JavaScript)上添加除jQuery之外的任何库或API。

我的问题是你如何在服务器端使用Dropzone.js新的chunked文件上传功能。 (客户端代码非常感谢设置)。

以下是我目前尝试的代码: 客户端.js文件:

    var myDropzone = new Dropzone("div#formDiv", 
    {
        url: "uploadform.php",
        params: function (files, xhr, chunk)
        {
            if (chunk)
            {
                return
                {
                    dzUuid=chunk.file.upload.uuid,
                    dzChunkIndex=chunk.index,
                    dzTotalFileSize=chunk.file.size,
                    dzCurrentChunkSize=chunk.dataBlock.data.size,
                    dzTotalChunkCount=chunk.file.upload.totalChunkCount,
                    dzChunkByteOffset=chunk.index * this.options.chunkSize,
                    dzChunkSize=this.options.chunkSize,
                    dzFilename=chunk.file.name;
                };
            }
        },
        method: "post",
        timeout: 600000,
        maxFileSize: 1024,
        parallelUploads: 1,
        chunking: true,
        forceChunking: true,
        chunkSize: 1000000,
        parallelChunkUploads: true,
        retryChunks: true,
        retryChunksLimit: 3,
        chunksUploaded: function (file, done)
        {
            // All chunks have uploaded successfully

        },
        error: function (msg)
        {
            alert(msg.responseText);
        }
});

这是PHP(服务器):

foreach ($_POST as $key => $value)
{
    _log('key:' . $key . '; Value:' . $value);
}

上面的代码没有显示任何内容(_log()只是将其回显到屏幕并将其记录在文本文件中。)

我查看了发送/接收标头,它只向服务器发送一个电话。

我已经验证了Dropzone.js使用浏览器中的开发人员工具控制台正确设置了文件拖放区域。

编辑:以下是分块上传的文档:https://gitlab.com/meno/dropzone/wikis/faq#chunked-uploads

  

分块上传

     

Dropzone提供了以块的形式上传文件的可能性。该   此功能的相关配置选项包括:

     

chunking应该设置为true

     

forceChunking,如果为true,将始终以块的形式发送文件,即使它也是如此   只是一个块

     

chunkSize in bytes

     

parallelChunkUploads,如果为true,将上传块   同时

     

retryChunks,如果为true,则库将重试上传一个块   失败

     

retryChunksLimit默认为3

     

然后有两个重要的回调。第一个是:params   可以是一个函数,它接收文件,xhr和chunk作为第一个   论点。如果启用了分块,则您知道文件仅包含   那个文件和chunk是保存所有信息的对象   关于当前的块。例如:

var chunk = {
  file: file,
  index: 0,
  status: Dropzone.UPLOADING,
  progress: 0.4
}
     

有关详细信息,请参阅该参数的文档或查看   在默认实现的源代码中。

     

第二个重要的回调是chunksUploaded,它获取文件   完成上传和完成函数作为第二个参数。做   无论你在该功能中需要做什么,都要告诉服务器   文件完成上传并在准备好时调用done()函数。

1 个答案:

答案 0 :(得分:1)

我发现我遇到了很多问题。一个是我没有使用最新版本的Dropzone.js。

另一个原因是我没有检查$ _FILE和$ _POST的变量和文件部分。

一旦我解决了这些问题,我就将JavaScript更改为:

    var myDropzone = new Dropzone("div#formDiv", 
    {
        url: "uploadform.php",
        method: "post",
        timeout: 180000,
        maxFileSize: 1024,
        parallelUploads: 1,
        chunking: true,
        forceChunking: true,
        chunkSize: 256000,
        parallelChunkUploads: true,
        retryChunks: true,
        retryChunksLimit: 3,
    };

通过删除params函数,我得到默认值。这些值包括块索引和最大块数。

从那里我可以使用以下方法获取PHP脚本中的分块文件:

$_FILE['file']['name']
$_FILE['file']['tmp_name']
$_POST['dzchunkindex']
$_POST['dztotalchunkcount']

之后只需要在PHP脚本中检查所有正在上传的文件部分,然后重新组装它们,这些内容在很多很容易在互联网上找到的教程中处理。