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

最新推荐文章于 2024-04-04 19:39:41 发布

原创最新推荐文章于 2024-04-04 19:39:41 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

前端开发其他专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用 XMLHttpRequest 实现文件上传的方法，并在上传过程中实时更新进度。适用于不同浏览器环境，包括 IE 和非 IE 浏览器。文章详细展示了如何设置 XMLHttpRequest 对象，绑定上传进度监听事件以更新进度条，并处理完成、失败和取消等状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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表示要上传的文件