通过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
  • 1019

XMLHttpRequest上传文件

文件: -->  许可证.jpg 支持jpg、jpeg、png、bmp格式图片,大小不超过2M ...
  • maoliangfei2011
  • maoliangfei2011
  • 2016年08月09日 10:02
  • 324

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

使用XMLHttpRequest 实现html文件异步上传
  • u011385445
  • u011385445
  • 2016年01月22日 15:59
  • 1494

1次ajax请求(XMLHttpRequest)上传多个文件,支持进度条

封装了一个ajax多文件上传,功能就是选择多个文件,用ajax上传。 调用方式也很简单,写一个json对象做为参数配置,设置要上传的服务端url以及选择文件和上传完成等的事件处理函数,new一个Aj...
  • cuixiping
  • cuixiping
  • 2012年08月27日 10:52
  • 8813

居于H5的多文件、大文件、多线程上传解决方案

H5 大文件 多文件 多线程
  • zengzm163
  • zengzm163
  • 2016年01月18日 23:40
  • 8028

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

var xhr = null;      if(window.ActiveXObject){ //如果是IE浏览器           xhr = new ActiveXObject("Mic...
  • u011144211
  • u011144211
  • 2015年07月07日 11:26
  • 2426

1次ajax请求(XMLHttpRequest)上传多个文件,支持进度条处理

  • 2012年08月27日 10:35
  • 20KB
  • 下载

java 实现html5多文件选择上传_h5多文件上传_ajax异步多文件上传_java处理多文件上传

java 实现html5多文件选择上传_h5多文件上传_ajax异步多文件上传_java处理多文件上传 html页面如下 muti file upload ...
  • graceup
  • graceup
  • 2017年09月08日 18:29
  • 1309

ajax与html5实现异步文件上传

ajax与html5实现异步文件上传        在之前的两篇文章中,分别介绍了XMLHttpRequest对象和iframe伪异步文件上传。在此就不再介绍介绍XMLHttpRequest对象了。之...
  • aozeahj
  • aozeahj
  • 2016年11月02日 15:52
  • 655

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

新标准的XMLHttpRequest支持上传文件,但是不支持html5的浏览器不行 html页面 Upload Files using XMLHttpRequest - Minimal...
  • pgmsoul
  • pgmsoul
  • 2012年12月08日 10:34
  • 12436
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:通过html5 File、XMLHttpRequest实现文件上传
举报原因:
原因补充:

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