实现拖拽上传文件的一款小控件——dropzone
由于专注所以专业。非常多小巧的东西乍一看非常不起眼，却在特定的领域表现不俗，就是由于集中了热情。
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的更多相关文章
- 原生API实现拖拽上传文件实践
功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...
- Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传
html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta ...
- Xshell拖拽上传文件插件
lrzsz是一款在linux里可代替ftp上传和下载的程序.在linux中支持直接拖拽上传的插件:同时也支持rz和sz进行命令上传和下载. 插件安装 yum -y install lrzsz 上传(r ...
- js拖拽上传 文件上传之拖拽上传
由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...
- ajax拖拽上传文件
AJAX拖拽上传 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Linux拖拽上传文件 lrzsz
首先安装lrzsz 命令为:yum install lrzsz 安装完毕后直接将.tar.gz格式的文件拖如xshell的窗口内就会自动上传.
- html5 拖拽上传文件时，屏蔽浏览器默认打开文件
参考: https://www.cnblogs.com/kingsm/p/9849339.html
- input文件上传（上传单个文件/多选文件/文件夹、拖拽上传、分片上传）
//上传单个/多个文件 <input title="点击选择文件" id="h5Input1" multiple="" accept= ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
随机推荐
- Web前端开发实战4：导航菜单(一)
在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单. 导航菜单种类非常多,可是制作原理都是大同 小异的.这里看的比二级下拉式菜单还简单. 来看一些站点上的导航菜单: 垂直导航菜单: 水平导航菜 ...
- 2018-8-10 模拟赛T3(可持久化线段树)
出题人说:正解离线按DFS序排序线段维护区间和 但是对于树上每个点都有一个区间和一个值,两个点之间求1~m的区间和,这不就是用可持久化线段树吗. 只不过这个线段树需要区间修改,不过不需要标记下传,询问 ...
- Android 开发之锁屏弹窗
尝试利用 WindowManager 添加浮窗的方式实现 想在锁屏上面实现弹窗,第一个想法就是利用 WindowManager 设置 Window 的 Flag,通过设置 Flag 的显示优先级来让窗 ...
- php数组函数（分类基本数组函数，栈函数，队列）
php数组函数(分类基本数组函数,栈函数,队列函数) 一.总结 1.常用数组函数 函数 描述 array() 创建数组. array_combine() 通过合并两个数组来创建一个新数组. array ...
- Redis原理（一）
基础和应用 1.Redis是远程调用技术的首字母缩写. 2.Redis可以用来做什么? Redis可以用来做缓存. 分布式锁 3.Redis的应用举例 记录帖子的点赞数.评论数和点击数.(使用HASH ...
- VC error link
错误1:LIBCD.lib(crt0.obj) : error LNK2001: unresolved external symbol _main在project-setting-link里找到pro ...
- 【例题 6-20 UVA - 1599】Ideal Path
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 逆向做一遍bfs. 得到终点到某个点的最短距离. 这样,我们从起点顺序的时候. 就能知道最短路的下一步是要走哪里了. 这样,我们从起 ...
- leetcode 113. Path Sum II (路径和) 解题思路和方法
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- javascript的组成
ECMAScript:(3/5/6/7) 它是JS语言的标准,规定了JS的编程语法和基础核心知识. DOM:document object model 文档对象模型,提供给JS很多的操作页面中元素的属 ...
- Spring Boot使用模板freemarker【从零开始学Spring Boot(转)
视频&交流平台: à SpringBoot网易云课堂视频 http://study.163.com/course/introduction.htm?courseId=1004329008 à ...