HTML5附件拖拽上传drop & google.gears实现代码
人气:0
腾讯微博也已近实现了拖拽上传。其实很简单。
由于没有服务器支持在文章里不能做上传演示，下载实例
拖拽上传需要什么支持
1:需要浏览器支持 drop 事件。(响应拖拽事件获取file对象);
2:XMLHttpRequest 对象有 sendAsBinary 方法(用于发送数据);
以上两个条件 目前仅有 firefox 能达到。
chrome 第一项达标，第2项可以使用 google.gears 来模拟。
所以能实现拖拽上传的浏览器 有 firefox3.6 + 和 chrome7+。
如何实现拖拽上传
1:绑定 drop 事件。
2:获取 file 对象。
3:获取对象的2进制数据。
4:模拟数据发送post请求。
<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：可以拖拽了
由于没有服务器支持在文章里不能做上传演示，下载实例
拖拽上传需要什么支持
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 | 上传状态 | 事件默认参数 |
加载全部内容