dropzone.js 拖拽上传文件
2015-10-15 14:55
706 查看
主要是记录一下dropzone.js 这个js基本用法
参考网址:http://www.dropzonejs.com/
1.所需js文件 (dropzone版本升级后可以不依赖jquery.js,但是写法大致相同)
dropzone.js jquery.js(可选) dropzone.css(可选)
2.htm具体代码
3.实现例图
资源下载:http://download.csdn.net/detail/u013361445/9183539
参考网址:http://www.dropzonejs.com/
1.所需js文件 (dropzone版本升级后可以不依赖jquery.js,但是写法大致相同)
dropzone.js jquery.js(可选) dropzone.css(可选)
2.htm具体代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>dropzone</title> <link rel="stylesheet" type="text/css" href="dropzone.css" /> </head> <body> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="dropzone.js"></script> <div id="dropz" width="100px" height="100px" class="dropzone"></div> <script> $("#dropz").dropzone({ url: "handle-upload.php", addRemoveLinks: true, dictRemoveLinks: "Remove File", dictCancelUpload: "Cancel Upload", maxFiles: 1, maxFilesize: 5, autoProcessQueue: true, acceptedFiles: ".jpg,.png", init: function() { this.on("success", function(file) { console.log("File " + file.name + "uploaded"); }); this.on("removedfile", function(file) { console.log("File " + file.name + "removed"); }); } }); </script> </body> </html>
3.实现例图
资源下载:http://download.csdn.net/detail/u013361445/9183539
相关文章推荐
- 基于对象的JavaScript语言
- FineReport——JS二次开发(下拉框)
- js闭包
- js 浏览器兼容问题
- JSON服务器的使用和客户端的解析
- seajs常用配置
- 如何通过JS,在html网页上进行添加元素,包括div 以及下拉框等
- [代码]JS原生Ajax,GET和POST
- js在以div添加滚动条
- php定义二维数组以及和JavaScript传递json数据
- JS 中的闭包
- JavaScript下用IE的方式实现文件读取
- php向JavaScript传递json数据并解析
- JsonModel使用
- 跟着9张思维导图学习Javascript
- JSTL基础知识
- javascript的页面加载及性能优化(兼容IE7)
- JS 正则表达式中的特殊字符
- js Dialog 去掉右上角的X关闭功能
- js静态方法与实例化方法