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 XML实现两级级联下拉列表
Nov 10 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
javascript常用的方法整理
Aug 20 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
JS随机密码生成算法
Sep 23 Javascript
Vue实现跑马灯效果
May 25 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python中序列的修改、散列与切片详解
2017/08/27 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python递归实现快速排序
2018/08/18 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Pytorch转tflite方式
2020/05/25 Python
Python 列表反转显示的四种方法
2020/11/16 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
新闻专业毕业生英文求职信
2014/03/19 职场文书
学校募捐倡议书
2014/05/14 职场文书
护士医德考评自我评价
2015/03/03 职场文书
写给导师的自荐信
2015/03/06 职场文书