HTML5附件拖拽上传drop & google.gears实现代码 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
本文标签：HTML5,拖拽上传 腾讯微博也已近实现了拖拽上传 。其实很简单 。 由于没有服务器支持在文章里不能做上传演示，下载实例 拖拽上传需要什么支持 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 有很大不同 。 实例 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
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
