用dropzone插件拖拽文件上傳默認情況是把一個文件拖到瀏覽器后就立即自動上傳，參考前文《用dropzone插件拖拽文件上傳》，如果需要一次上傳多個文件怎么辦？本文將介紹其實現(xiàn)方法。

dropzone一次上傳多個文件

實例代碼

把圖片拖到下面進行上傳

Upload

$(document).ready(function () {

Dropzone.options.form1 = {

//禁止自動提交上傳autoProcessQueue: false,

//一次最多上傳文件數(shù)parallelUploads: 10,

maxFiles: 10,

//文件最大體積

maxFilesize: 0.5, //單位：MB

//限制文件類型

acceptedFiles: ".jpg, .jpeg, .png, .gif, .pdf",

//刪除按鈕

addRemoveLinks: true,

init: function (e) {

var myDropzone = this;

$('#btn_upload').on("click", function() {

myDropzone.processQueue(); // Tell Dropzone to process all queued files.

});

// Event to send your custom data to your server

myDropzone.on("sending", function(file, xhr, data) {

// First param is the variable name used server side

// Second param is the value, you can add what you what

// Here I added an input value

//data.append("your_variable", $('#your_input').val());

});

}

};

});

后臺上傳程序使用php實現(xiàn)，代碼如下：

if (!empty($_FILES)) {

if(is_array($data)){

foreach($_FILES['file']['tmp_name'] as $key => $value) {

$tempFile = $_FILES['file']['tmp_name'][$key];

$targetFile = $_FILES['file']['name'][$key];

move_uploaded_file($tempFile,$targetFile);

}

}

else{

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

$targetFile = $_FILES['file']['name'];

move_uploaded_file($tempFile,$targetFile);

}

}

?>

代碼解釋

1、使用插件

需要用到jquery庫文件，我們可直接用百度的cdn公共庫文件。

其次使用插件dropzone.js，注意文件路徑寫正確。

2、html代碼

添加一個form標簽，和一個button標簽。

form標簽的action是上傳文件的后臺程序。button是需要點擊的“上傳”按鈕。

Upload

3、jquery代碼

$(document).ready(function () {

Dropzone.options.form1 = {

//禁止自動提交上傳autoProcessQueue: false,

//一次最多上傳文件數(shù)

parallelUploads: 10,

maxFiles: 10,

//文件最大體積maxFilesize: 0.5, //單位：MB

//限制文件類型acceptedFiles: ".jpg, .jpeg, .png, .gif, .pdf",

//刪除按鈕

addRemoveLinks: true,

init: function (e) {

var myDropzone = this;

$('#btn_upload').on("click", function() {

myDropzone.processQueue(); // Tell Dropzone to process all queued files.

});

// Event to send your custom data to your server

myDropzone.on("sending", function(file, xhr, data) {

// First param is the variable name used server side

// Second param is the value, you can add what you what

// Here I added an input value

//data.append("your_variable", $('#your_input').val());

});

}

};

});

多文件上傳，主要是用到參數(shù)parallelUploads和maxFiles，如果沒有這兩個參數(shù)，則默認是最多一次上傳2個文件。

這里注意Dropzone.options.form1中的form1是html代碼里的form標簽的id名稱。btn_upload是html代碼里的button標簽按鈕的id名稱。

4、php程序

需要明白多文件上傳時多個文件是一個數(shù)組，所以后臺程序要視作接收一個數(shù)組來處理，if(is_array($data))就是判斷接收的數(shù)據(jù)是否數(shù)組，如果只上傳一個文件，則不是數(shù)組。

注意問題

dropzone插件不支持上傳文件名含中文字符。

總結(jié)

以上是生活随笔為你收集整理的php 拖动多个文件上传,dropzone拖拽文件上传一次上传多个文件的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。