使用dropzone上传多个文件

时间:2019-08-30 13:33:23

标签: dropzone

由于某些原因,如果我在创建一个dropzone实例时将uploadMutiple选项设置为true,则服务器端上传脚本将无法执行任何操作。

我之所以要以编程方式创建放置区,是因为上载表单存在于模式弹出窗口中-由AJAX请求调用。

我的上传表单:

<div id="myDropzone" style="height:190px;border:1px blue;border-style:dotted;background-color:white;text-align:center;overflow-y:auto;">
  <br /><br /><br />
  Drop image here or click to upload.
</div>

然后在我的JavaScript中,将那个div变成一个dropzone

var myDropzone = new Dropzone("div#myDropzone", { url: "/tools/news/uploadimage.php", uploadMultiple : true });

            myDropzone.on("queuecomplete", function(file) {
                alert("All files have uploaded ");
                //closeJustPopup('uploadImagePopup');
            });

我的上传脚本

<?php
$ds          = DIRECTORY_SEPARATOR;  //1

$storeFolder = 'images';   //2

if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];          //3             

    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

    //$targetFile =  $targetPath. $_FILES['file']['name'];  //5

    $extension = pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
    $targetFile = $targetPath . date('YmdHis',time()).'.'.$extension;

    move_uploaded_file($tempFile,$targetFile); //6

}
?>   

1 个答案:

答案 0 :(得分:0)

经过很多摆弄之后才找到解决方案-事实证明,不需要uploadMultiple选项,并且实际上将其破坏了。我还在上传脚本的文件名中添加了microtime(),以确保其唯一性。

此外,我不得不将parallelUploads减少为1。我在网上发现的其他大多数示例都将其设置为10。

希望这对其他人有用!

var myDropzone = new Dropzone("div#myDropzone", { 
                        url: "/tools/news/uploadimage.php", 
                        parallelUploads: 1,
                        maxFiles: null,
                        processingmultiple() {},
                        sending() {},
                        totaluploadprogress(uploadProgress) {},
                        successmultiple(files, res) {},
                        errormultiple(file, res, xhr) {},
                        queuecomplete() {}

                    }
                );

PHP脚本中的文件名

$targetFile = $targetPath . date('YmdHis',time()) . microtime() . '.'.$extension;