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.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
vue.js动态数据绑定学习笔记
May 19 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 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数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
javascript cookies操作集合
2010/04/12 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
使用pandas读取文件的实现
2019/07/31 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
新电JAVA笔试题目
2014/08/31 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
行政前台岗位职责
2013/12/04 职场文书
婚前协议书怎么写
2014/04/15 职场文书
导游个人求职信
2014/04/25 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Go语言编译原理之变量捕获
2022/08/05 Golang