由于XMLhttprequest 和 google.gears 有很大不同。
所以我总进行了封装(UpLoadFileXHR)。上面 2 3 4 步骤我都封装好了。 
只要实例化 UpLoadFileXHR 就可以做拖拽文件上传了。点击下载

实例

1：引用 UpLoadFileXHR.js 文件
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/UpLoadFileXHR.js">
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 上传状态 事件默认参数