|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
dropzone拖拽文件上傳時(shí)禁止自動(dòng)上傳的方法
作者:admin 時(shí)間:2019-3-19 10:56:23 瀏覽:用dropzone插件拖拽文件上傳時(shí)，文件是自動(dòng)上傳的，拖到瀏覽器后就立即自動(dòng)上傳了，無(wú)需再手動(dòng)點(diǎn)擊“提交”按鈕。這樣處理雖然看似上傳文件更快捷了，但容錯(cuò)率卻降低了，風(fēng)險(xiǎn)更高了，因?yàn)槲覀冞x擇文件后沒(méi)有機(jī)會(huì)再看看是否有選錯(cuò)，而一旦發(fā)現(xiàn)有選錯(cuò)，文件已經(jīng)被上傳到服務(wù)器了。所以我們最好加一個(gè)“提交”按鈕，來(lái)最終確定無(wú)誤后，再把文件上傳。本文將介紹禁止dropzone自動(dòng)上傳文件的方法。
dropzone插件拖拽文件上傳
實(shí)例HTML代碼
<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_file.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,
//刪除按鈕
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>
代碼解釋
1、使用插件
1）、引用jquery庫(kù)文件
2）、使用dropzone插件
注意dropzone.js文件位置要寫(xiě)對(duì)。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><br/>
<script src="dropzone.js"></script>
2、html代碼
<form action="upload_file.php" class="dropzone" id="form1">
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
<button type="button" id="btn_upload">Upload</button>
upload_file.php是處理上傳的程序文件。
3、jquery代碼
<script>
$(document).ready(function () {
Dropzone.options.form1 = {
//禁止自動(dòng)提交上傳
autoProcessQueue: false,
//刪除按鈕
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>
程序關(guān)鍵是使用autoProcessQueue: false來(lái)禁止文件自動(dòng)上傳。
注意問(wèn)題
該插件不支持中文文件名的上傳文件。
