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 相关文章推荐
基于jquery的气泡提示效果
May 31 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
jquery等待效果示例
May 01 Javascript
javascript运动详解
Jul 06 Javascript
继续学习javascript闭包
Dec 03 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
很棒的学习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
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
javascript 常见功能汇总
2015/06/11 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python中SQLite如何使用
2020/05/27 Python
想学画画?python满足你!
2020/12/24 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
造价工程师个人求职信
2013/09/21 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
十佳青年事迹材料
2014/08/21 职场文书
学习党章的体会
2014/11/07 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
刑事案件上诉状
2015/05/23 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Python进程间的通信之语法学习
2022/04/11 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers