HTML5附件拖拽上传drop & google.gears实现代码


Posted in Javascript onApril 28, 2011

腾讯微博也已近实现了拖拽上传。其实很简单。
由于没有服务器支持在文章里不能做上传演示,下载实例
拖拽上传需要什么支持
1:需要浏览器支持 drop 事件。(响应拖拽事件获取file对象);
2:XMLHttpRequest 对象有 sendAsBinary 方法(用于发送数据);
以上两个条件 目前仅有 firefox 能达到。
chrome 第一项达标,第2项可以使用 google.gears 来模拟。
所以能实现拖拽上传的浏览器 有 firefox3.6 + 和 chrome7+。
如何实现拖拽上传
1:绑定 drop 事件。
2:获取 file 对象。
3:获取对象的2进制数据。
4:模拟数据发送post请求。

由于XMLhttprequest 和 google.gears 有很大不同。
所以我总进行了封装(UpLoadFileXHR)。上面 2 3 4 步骤我都封装好了。 
只要实例化 UpLoadFileXHR 就可以做拖拽文件上传了。点击下载

实例

1:引用 UpLoadFileXHR.js 文件

<script type="text/javascript" src="UpLoadFileXHR.js"></script>

2:实例化 upLoadFileXHR 绑定事件,设置参数等(具体可以看下面的UpLoadFileXHR介绍)
/** 
* var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'}); 
* url : 上传数据路径 
* name: 后台读取数据的 name 
* XHR : google.gears or new XMLHttpRequest() 
* format : 上传格式正则表达式 
* 
* 
* Methods 
* .onerror function 出现错误 
* .onloadstart function 传送开始 Parameter Event对象 (如果使用 google.gears 没有此方法) 
* .onprogress function 传送进度 Parameter Event对象 
* .onreadystatechange function 状态 Parameter this.XHR 
*/ 
var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'}); 
upLoad.format = /jpg|gif|jpeg|png/; // 设置上传格式 
//定义格式出错调用方法 
upLoad.onformaterror = function(){ 
alert('上传格式错误,仅支持[jpg|gif|jpeg|png] 格式!'); 
} 
// 定义上传状态方法 
// 这里就跟使用XMLhttprequest对象一样操作时间就可以了 
upLoad.onreadystatechange = function(){ 
if(upLoad.XHR.readyState == 4){ 
log(upLoad.XHR.responseText); 
} 
} 
// 开始上传 
upLoad.onloadstart = function(f){ 
// 开始上传 
} 
// 取得实时上传进度 
upLoad.onprogress = function(e){ 
/* 
* e.loaded 已经上传的数据大小 
* e.total 总大小 
* Math.round((e.loaded * 100) / e.total) 数据上传百分比 
*/ 
log('已经上传了 '+ Math.round((e.loaded * 100) / e.total) +'%') 
}

3:绑定drop
/* 
* 我们只需要 ondrop 事件 
* ondragenter 和 ondragover 直接绑定 stopPrevent 方法取消掉默认动作 
* ondrop 绑定 start 方法注意这里一定要用call把 this 指向 你实例化的对象 
*/ 
elem.ondragenter = upLoad.stopPrevent; 
elem.ondragover = upLoad.stopPrevent; 
elem.ondrop = function(e){upLoad.stopPrevent(e);upLoad.start.call(upLoad, e)};

4:可以拖拽了

如何使用 UpLoadFileXHR

new UpLoadFileXHR(Object)
var upLoadFile = new UpLoadFileXHR({url:'',name:''})
url string 上传地址 必须
name string 后台取得数据的name 必须
属性
format RegExp 过滤文件类型比如(/jpg|pen|jpeg|gif/);不设置则所有文件通过 非必要
debug Boolean 是否开启debug 默认false
自动填充属性
XHR object 实例化以后根据浏览器自动填充的属性,这里保存了当前上传文件所使用的xhr对象 自动
support object 当前用什么传输数据 {googleGears:Boolean, fileReader:Boolean} 自动
方法
start function 绑定到drop事件上的方法,接收一个事件默认e参数。请把this指向你当前的调用start的对象  
stopPrevent function 取消事件冒泡和事件默认动作 return false
checkFile function 检查file属性(格式,大小等) return Boolean
事件
onerror function 出错 默认参数 e(错误对象)
onformaterror function 格式不正确(判断依据 format 属性) 默认参数 file(当前file对象)
onloadstart function 开始上传 默认参数 file(google.gears下) or e(XMLhttprequest下)
onprogress function 上传进度 事件默认参数
onreadystatechange function 上传状态 事件默认参数
Javascript 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
纯js实现动态时间显示
Sep 07 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
vue实现登录功能
Dec 31 Vue.js
很棒的学习jQuery的12个网站推荐
Apr 28 #Javascript
推荐20家国外的脚本下载网站
Apr 28 #Javascript
JavaScript中的this实例分析
Apr 28 #Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 #Javascript
JavaScript中获取未知对象属性的代码
Apr 27 #Javascript
JavaScript之HTMLCollection接口代码
Apr 27 #Javascript
利用jQuery操作对象数组的实现代码
Apr 27 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
PHP学习之整理字符串
2011/04/17 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
vuejs绑定class和style样式
2017/04/11 Javascript
JS中的三个循环小结
2017/06/20 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
python daemon守护进程实现
2016/08/27 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
使用Python来开发微信功能
2018/06/13 Python
python3 pygame实现接小球游戏
2019/05/14 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
新大陆软件面试题
2016/11/24 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
师德培训心得体会2016
2016/01/09 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript
Go语言编译原理之源码调试
2022/08/05 Golang