使用拖放区上传多个文件

  • 本文关键字:文件 拖放区 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 变成一个拖放区

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
}
?>   

经过大量的摆弄,这里是解决方案 - 事实证明 uploadMultiple 选项不是必需的,并且实际上破坏了它。 我还在上传脚本中的文件名中添加了microtime((,以确保它是唯一的。

此外,我不得不将并行上传减少到 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;

最新更新