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

最新推荐文章于 2024-04-04 11:00:00 发布

我是干勾鱼

最新推荐文章于 2024-04-04 11:00:00 发布

阅读量6.7k

点赞数 2

分类专栏： Web前端

本文链接：https://blog.csdn.net/dongdong9223/article/details/39697433

版权

Web前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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

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

使用Dropzone所需要的准备工作很简单，你只需要在你的页面中增加：

    <script src="./path/to/dropzone.js"></script>

这样就可以使用Dropzone的功能了。当然，对于服务器端的文件处理，需要自行解决。Dropzone只是对前端进行控制。

如果想让自己的拖拽上传空间再显得美观些，比如提供上传预览啊什么的，可以使用作者提供的另外几个文件：

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

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

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

    <form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

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

其实上面的代码可以简单的理解成内部包含着如下一段代码：

    <input type="file" name="file" />

名字“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 = "拖拽文件后将直接提交文件";
		}
	};
	
	 /*
	//拖拽后点击按钮上传
	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; // closure

			submitButton.addEventListener("click", function() {
				myAwesomeDropzone.processQueue(); // Tell Dropzone to process all queued files.
			});
			
			document.getElementById("divText").innerHTML = "拖拽文件后请点击按钮提交文件";
		}
	};
	*/
</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>

大家可以试试效果，页面是这样的：