通过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上传文件 file API -XMLHttpRequest 2 示例

使用XMLHttpRequest上传文件
  • keyunq
  • keyunq
  • 2016年11月02日 17:19
  • 722

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

新标准的XMLHttpRequest支持上传文件,但是不支持html5的浏览器不行 html页面 Upload Files using XMLHttpRequest - Minimal...
  • pgmsoul
  • pgmsoul
  • 2012年12月08日 10:34
  • 12154

XMLHTTPRequest实现带进度条的文件上传

通过之前的文章,我们知道XMLHTTPRequest对象是实现Ajax技术的核心,之前的博文介绍了其简单的应用,这篇文章展示通过XMLHttpRequest对象来定时监控服务器上文件上传的进度,通过进...
  • gxwzmm
  • gxwzmm
  • 2013年09月24日 21:36
  • 11412

XMLHttpRequest 异步方式和同步方式

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

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

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

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

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

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

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

利用XMLHttpRequest同步和异步下载二进制文件的解决方案。

在最新的XMLHttpRequest2里支持二进制文件的下载了,现分别以同步和异步两种方式分别介绍,以下载图片为例。 异步的方式下载: xmlRequest.open("GET", "0.j...

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

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

XMLHttpRequest().open()打开文本文件

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:通过html5 File、XMLHttpRequest实现文件上传
举报原因:
原因补充:

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