技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

dropzone拖拽文件上传时禁止自动上传的方法

作者:admin    时间:2019-3-19 10:56:23    浏览:

用dropzone插件拖拽文件上传时,文件是自动上传的,拖到浏览器后就立即自动上传了,无需再手动点击“提交”按钮。这样处理虽然看似上传文件更快捷了,但容错率却降低了,风险更高了,因为我们选择文件后没有机会再看看是否有选错,而一旦发现有选错,文件已经被上传到服务器了。所以我们最好加一个“提交”按钮,来最终确定无误后,再把文件上传。本文将介绍禁止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>

execcodegetcode

代码解释

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来禁止文件自动上传。

注意问题

该插件不支持中文文件名的上传文件。

标签: dropzone  文件上传  
  • IT热文
  • 站长推荐