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 相关文章推荐
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
jQuery返回定位插件详解
May 15 jQuery
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
浅谈Vue响应式(数组变异方法)
May 07 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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 读取文件乱码问题
2010/02/20 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
JS常用函数使用指南
2014/11/23 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
事业单位接收函
2014/01/10 职场文书
经济国贸专业求职信
2014/06/18 职场文书
司机工作自我鉴定
2014/09/19 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
红高粱观后感
2015/06/10 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL