实现拖拽上传文件的一款小控件——dropzone

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

由于专注所以专业。非常多小巧的东西乍一看非常不起眼，却在特定的领域表现不俗，就是由于集中了热情。

dropzone就是这样一款小控件，实现拖拽上传。它不依赖于其他像jquery等JS库。并且支持多方面的定制。

使用Dropzone所须要的准备工作非常easy，你仅仅须要在你的页面中添加：

这样就能够使用Dropzone的功能了。

当然。对于server端的文件处理。须要自行解决。Dropzone仅仅是对前端进行控制。

假设想让自己的拖拽上传空间再显得美观些。比方提供上传预览啊什么的。能够使用作者提供的另外几个文件：

css/dropzone.css
images/spritemap.png
images/spritemap@2x.png

将它们增加合适的路径以便引用。

使用Dropzone一般是建立一个form控件来引用：

当中标记为“dropzone”的class属性就是Dropzone的“线人”，Dropzone就是通过它渗透进来的。

事实上上面的代码能够简单的理解成内部包括着例如以下一段代码：

名字“file”也能够通过更改Dropzone的“paramName”属性来改变。

我写了一个引用的样例：

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>dropzonejs test</TITLE>
</HEAD>
<link href=./dropzone/dropzone.css rel=stylesheet />
<script src="./dropzone/dropzone_gbk.js"></script>
<style type="text/css">
span.ts {
color:rgb(0,0,255)
}input.btn {
width: 71px;
height: 20px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
// Prevent Dropzone from auto discovering this element:
//Dropzone.options.myAwesomeDropzone = false;
// This is useful when you want to create the
// Dropzone programmatically later// Disable auto discover for all elements:
//Dropzone.autoDiscover = false;//拖拽直接上传
Dropzone.options.myAwesomeDropzone = {
paramName : "userfile2", // The name that will be used to transfer the file
maxFilesize : 2, // MB
accept : function(file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
} else {
done();
}
},
init : function() {
document.getElementById("divText").innerHTML = "拖拽文件后将直接提交文件";
}
}; /*
//拖拽后点击button上传
Dropzone.options.myAwesomeDropzone = {
paramName : "userfile2", // The name that will be used to transfer the file
maxFilesize : 2, // MB
accept : function(file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
} else {
done();
}
},
autoProcessQueue : false,init : function() {
var submitButton = document.querySelector("#submit-all")
myAwesomeDropzone = this; // closuresubmitButton.addEventListener("click", function() {
myAwesomeDropzone.processQueue(); // Tell Dropzone to process all queued files.
});document.getElementById("divText").innerHTML = "拖拽文件后请点击button提交文件";
}
};
*/
</SCRIPT>
<BODY>
------------------------------------<br>

<span class="ts">拖拽上传：</span><br><br>
<form action="FileAction.do" class="dropzone" id="myAwesomeDropzone">
<input type="button" name="submit" value="提交" id="submit-all" class="btn" />
</form>
<div id="divText" style="color:red"></div><br>------------------------------------<br>
<br>
<span class="ts">普通上传：</span><br><br>
<form method="post" action="FileAction.do"
enctype="multipart/form-data" id="form1">
<input type="file" id="f2" name="userfile" > <br> <input
type="text" name="ta" value="文本參数" /> <br> <input
type="submit" name="submit" class="btn">
</form>
<div id="divText" style="color:red">普通文件上传用作效果对照</div><br>
------------------------------------<br>
</BODY>
</HTML>