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

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

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

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

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

当然。对于server端的文件处理。须要自行解决。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 = "拖拽文件后将直接提交文件";

		}

	};

	 /*

	//拖拽后点击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; // closure

			submitButton.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>

大家能够试试效果，页面是这种：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZG9uZ2Rvbmc5MjIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

后台就请大家自己实现试一下吧。

就像《三国演义》中吕布和赵云没有交过手一样，Dropzone也有一点小遗憾。

Dropzone对浏览器是有要求的，IE要10以上才支持，为之小叹。

实现拖拽上传文件的一款小控件——dropzone的更多相关文章

  1. 原生API实现拖拽上传文件实践

    功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...

  2. Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传

    html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta  ...

  3. Xshell拖拽上传文件插件

    lrzsz是一款在linux里可代替ftp上传和下载的程序.在linux中支持直接拖拽上传的插件:同时也支持rz和sz进行命令上传和下载. 插件安装 yum -y install lrzsz 上传(r ...

  4. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  5. ajax拖拽上传文件

    AJAX拖拽上传 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. Linux拖拽上传文件 lrzsz

    首先安装lrzsz 命令为:yum install lrzsz 安装完毕后直接将.tar.gz格式的文件拖如xshell的窗口内就会自动上传.

  7. html5 拖拽上传文件时，屏蔽浏览器默认打开文件

    参考: https://www.cnblogs.com/kingsm/p/9849339.html

  8. input文件上传（上传单个文件/多选文件/文件夹、拖拽上传、分片上传）

    //上传单个/多个文件 <input title="点击选择文件" id="h5Input1" multiple="" accept= ...

  9. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

随机推荐

  1. 27.Node.js模块系统

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模 ...

  2. 3.JPA开发

    转自:https://blog.csdn.net/aspnetandjava/article/details/7034779 1. 什么是JPA 1. JPA(Java Persistence API ...

  3. tooltip两个特殊的属性

    <body style="margin: 50px;"> <!--两个特殊的属性--> <div id="selection"&g ...

  4. echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

    项目是拿 echarts + 百度地图 来做可视化界面,现在到收尾阶段慢慢优化. 先附代码: formatter: function(params) { var result = '' params. ...

  5. Vue router的query对象里的值的问题

    在使用 $router.push() 时,如果使用了query,则可以在跳转后从query中获取到对应的参数.如果传的是字符串自然没问题,但是如果传的其他类型的数据,在跳转之后是正常的,而跳转之后再刷 ...

  6. SpringCloud核心教程 | 第一篇： 使用Intellij中的Spring Initializr来快速构建Spring Cloud工程

    spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运行环 ...

  7. 洛谷 P2677 超级书架 2

    P2677 超级书架 2 题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有 ...

  8. percona-toolkit的安装及简单介绍

    MySQL数据库是轻量级.开源数据库的佼佼者.其功能和管理,健壮性与Oracle相比还是有相当的差距.因此有非常多功能强大第三方的衍生产品,如percona-toolkit,XtraBackup等等. ...

  9. IIS7性能优化

    http://www.03389.com/BLOG/user1/qq66565841/archives/2014/2014112143553.html IIS7性能优化 IIS7 优化-网站请求并发数 ...

  10. Mongodb总结5-通过装饰模式，用Mongodb解决Hbase的不稳定问题

    最近继续学习Mongodb的根本原因,是为了解决今天的问题.项目中用到了Hbase,生产环境服务器用了3台,但是不够稳定,每2天左右,就连不上了.重启就好了,当然,这是一个历史遗留问题.我在想,是不是 ...