通过html5 File、XMLHttpRequest实现文件上传

原创 2015年07月07日 11:26:54

     var xhr = null;
     if(window.ActiveXObject){ //如果是IE浏览器
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }else if(window.XMLHttpRequest){ //非IE浏览器
          xhr = new XMLHttpRequest();
     }

     //上传过程中绑定uploadProgress(complete,total,index,evt)方法,即时更新进度条,要传递参数只能通过bind来绑定,且第一个参数为null,evt为当前时间,evt.loaded * 100 / evt.total 已完成的百分比

     xhr.upload.addEventListener("progress", uploadProgress.bind(null,complete,total,index), false);
     xhr.addEventListener("load", uploadComplete.bind(null,uploadId,dataFile,filename,complete,total,index), false);
     xhr.addEventListener("error", uploadFailed, false);
     xhr.addEventListener("abort", uploadCanceled, false);
     var cancelBtn = $('.upload_item').eq(index).find(".upload_btn");
     cancelBtn.on("click",cancelUpload.bind(null,xhr,cancelBtn));
     xhr.open('PUT', "http://***.oss-cn-beijing.aliyuncs.com/.......";//put为这次请求的类型
     xhr.setRequestHeader("Content-Type", dataFile.type);
     xhr.send(data);//data表示要上传的文件

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

带进度条的HTML5上传文件(使用XMLHttpRequest对象)

新标准的XMLHttpRequest支持上传文件,但是不支持html5的浏览器不行 html页面 Upload Files using XMLHttpRequest - Minimal...

关于Javascript 中的 FileReader, XMLHttpRequest, Blob, ArrayBuffer, DataURL 等

FileReader 用于读取 Blob 和 File Blob 是 HTML 中内嵌对象的媒体数据, 如Jpeg文件内容 File 就是 HTML 中 的文件 如:  var reader = n...

利用XMLHttpRequest level 2 实现文件异步上传

使用XMLHttpRequest 实现html文件异步上传

XMLHttpRequest 异步方式和同步方式

一.同步和异步区别   简单说:同步是阻塞模式,异步是非阻塞模式。   举个例子:普通B/S模式(同步)AJAX技术(异步)     同步:提交请求->等待服务器处理->处理完毕返回 这...

XMLHttpRequest实现HTTP协议下文件上传断点续传

目前从实用技术角度讲,文件上传的断点续传实现主要是借助客户端,例如,我们首次进入某网盘,会看到下图所示的“控件安装”提示:   有的网盘也有文件上传暂停的功能,这似乎是借助swfU...

html上传图片并显示

html获取上传图片,并自动显示

带进度条的HTML5上传文件(使用XMLHttpRequest对象

新标准的XMLHttpRequest支持上传文件,但是不支持html5的浏览器不行 html页面 !DOCTYPE html PUBLIC -//W3C//DTDXHTML1.0Transitiona...

HTML5使用 JavaScript File API 实现文件上传

文件来源:http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/ 简介: File API 是 Mozilla 向 W3C...

html5上传文件 file API -XMLHttpRequest 2 示例

使用XMLHttpRequest上传文件
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)