dropzone拖拽文件上传时禁止自动上传的方法
作者:admin 时间:2019-3-19 10:56:23 浏览:用dropzone插件拖拽文件上传时，文件是自动上传的，拖到浏览器后就立即自动上传了，无需再手动点击“提交”按钮。这样处理虽然看似上传文件更快捷了，但容错率却降低了，风险更高了，因为我们选择文件后没有机会再看看是否有选错，而一旦发现有选错，文件已经被上传到服务器了。所以我们最好加一个“提交”按钮，来最终确定无误后，再把文件上传。本文将介绍禁止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来禁止文件自动上传。
注意问题
该插件不支持中文文件名的上传文件。
- 站长推荐
