|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
dropzone拖拽文件上傳時禁止自動上傳的方法
作者:admin 時間:2019-3-19 10:56:23 瀏覽:用dropzone插件拖拽文件上傳時，文件是自動上傳的，拖到瀏覽器后就立即自動上傳了，無需再手動點擊“提交”按鈕。這樣處理雖然看似上傳文件更快捷了，但容錯率卻降低了，風險更高了，因為我們選擇文件后沒有機會再看看是否有選錯，而一旦發(fā)現(xiàn)有選錯，文件已經被上傳到服務器了。所以我們最好加一個“提交”按鈕，來最終確定無誤后，再把文件上傳。本文將介紹禁止dropzone自動上傳文件的方法。
dropzone插件拖拽文件上傳
實例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>把圖片拖到下面進行上傳</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 = {
//禁止自動提交上傳
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庫文件
2）、使用dropzone插件
注意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代碼
<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 = {
//禁止自動提交上傳
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>
程序關鍵是使用autoProcessQueue: false來禁止文件自動上傳。
注意問題
該插件不支持中文文件名的上傳文件。
- 站長推薦
