|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
dropzone拖拽文件上傳一次上傳多個(gè)文件的方法
作者:admin 時(shí)間:2019-3-20 15:15:28 瀏覽:用dropzone插件拖拽文件上傳默認(rèn)情況是把一個(gè)文件拖到瀏覽器后就立即自動(dòng)上傳，參考前文《用dropzone插件拖拽文件上傳》，如果需要一次上傳多個(gè)文件怎么辦？本文將介紹其實(shí)現(xiàn)方法。
dropzone一次上傳多個(gè)文件
實(shí)例代碼
<html>
<head>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><br/>
<script src="dropzone.js"></script>
<link href="dropzone.css" rel="stylesheet" />
<p>把圖片拖到下面進(jìn)行上傳</p>
<form action="upload_multi_files.php" class="dropzone" id="form1">
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
<button type="button" id="btn_upload">Upload</button>
<script>
$(document).ready(function () {
Dropzone.options.form1 = {
//禁止自動(dòng)提交上傳
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());
});
}
};
});
</script>
</body>
</html>
后臺(tái)上傳程序使用php實(shí)現(xiàn)，代碼如下：
<?php
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、使用插件
需要用到j(luò)query庫(kù)文件，我們可直接用百度的cdn公共庫(kù)文件。
其次使用插件dropzone.js，注意文件路徑寫正確。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><br/>
<script src="dropzone.js"></script>
2、html代碼
添加一個(gè)form標(biāo)簽，和一個(gè)button標(biāo)簽。
form標(biāo)簽的action是上傳文件的后臺(tái)程序。button是需要點(diǎn)擊的“上傳”按鈕。
<form action="upload_multi_files.php" class="dropzone" id="form1">
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
<button type="button" id="btn_upload">Upload</button>
3、jquery代碼
<script>
$(document).ready(function () {
Dropzone.options.form1 = {
//禁止自動(dòng)提交上傳
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());
});
}
};
});
</script>
多文件上傳，主要是用到參數(shù)parallelUploads和maxFiles，如果沒有這兩個(gè)參數(shù)，則默認(rèn)是最多一次上傳2個(gè)文件。
這里注意Dropzone.options.form1中的form1是html代碼里的form標(biāo)簽的id名稱。btn_upload是html代碼里的button標(biāo)簽按鈕的id名稱。
4、php程序
需要明白多文件上傳時(shí)多個(gè)文件是一個(gè)數(shù)組，所以后臺(tái)程序要視作接收一個(gè)數(shù)組來處理，if(is_array($data))就是判斷接收的數(shù)據(jù)是否數(shù)組，如果只上傳一個(gè)文件，則不是數(shù)組。
注意問題
dropzone插件不支持上傳文件名含中文字符。
- 站長(zhǎng)推薦
