http上传文件和进度监控以及构造multipart/form-data请求

最新推荐文章于 2023-04-26 14:32:07 发布

F2E前端爱好者

最新推荐文章于 2023-04-26 14:32:07 发布

阅读量7.1k

点赞数

分类专栏：厦门 javascript 文章标签： javascript http xml xmlhttp request

本文链接：https://blog.csdn.net/laike1355/article/details/50848416

版权

javascript 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

厦门

3 篇文章 0 订阅

订阅专栏

http上传文件

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>http</title>
    <link rel="stylesheet" href="">
    <script src="js/common.js"></script>
    <script src="js/http.js"></script>
</head>
<body>
<form action="upload" method="post" accept-charset="utf-8">
     <input type="file" data-uploadTo="http://www.baidu.com"></input>
</form>
</body>
</html>

js代码


//自用工具库
var whenReady = (function(){
    var ready = false;
    var funcs = [];//存储函数的数组
    function handler(e){
        if(ready) return;
        if(e.type === 'readystatechange' && document.readyState !== 'commplete'){
            return;
        }
        for(var i=0;i<funcs.length;i++){
              funcs[i].call(document);
        }
        //进行标记
        ready  = true;
        funcs = null;//置空
    }
    if(document.addEventListener){
         document.addEventListener('DOMContentLoaded', handler,false);
         document.addEventListener('readystatechange', handler,false);
         window.addEventListener('load',handler,false);
    }else{
        //兼容IE等不支持addEventListener方法的浏览器
        document.attachEvent('onreadystatechange',handler);
        window.attachEvent('onload',handler);
    }
    return function isReady(f){

        if(ready){
             f.call(document);
        }else{
            funcs.push(f);
        }
    }
}());

whenReady(function(){
  var elts = document.getElementsByTagName('input');
  for (var i = 0; i < elts.length; i++) {
    var input=elts[i];
    if(input.type !=='file') continue;
    var url = input.getAttribute('data-uploadTo');
    if(!url) continue;
    input.addEventListener('change', function(){
      var file = this.files[0];
      if(!file) return;
      var xhr = new  XMLHttpRequest();
      xhr.open('POST',url);
      xhr.send(file);
    },false);
  }
  //postFormData('http://www.baidu.com');
  checkBrowserIsSupportProgressEvent();//检测当前浏览器对http progress事件的支持情况！
});

构造multipart/form-data请求

//使用POST方法发送multipart/form-data请求主题
function postFormData(url,data,callback){
  if(typeof FormData === 'undefined') throw new Error('FormData is not implemented!');
  var request = new XMLHttpRequest();
  request.open('POST',url);
  request.onreadystatechange = function(){
     if(request.readyState === 4 && callback){
           return callback(request);
     }
  }
  var formdata = new FormData();
  for(name in formdata){
    if(!formdata.hasOwnProperty(name)) continue;
    if(typeof formdata[name] ==='function') continue;
    formdata.append(name,formdata[name]);
  }
  //在mutipart请求主体中发送名/值对 每队都是请求的一部分 注意当传入FormData 对象时 send()会自动设置Content-Type
  request.send(formdata);
}

http进度事件

并不是所有的浏览器都支持progress事件

//HTTP的进度事件
function checkBrowserIsSupportProgressEvent(){
  if('onprogress' in (new XMLHttpRequest())){
    alert('支持http进度事件！');
  }else{
    alert('对不起您的浏览器不支持http进度事件！请更换谷歌或者火狐浏览器！');
  }
}
request.onprogress=function(e){
  if(e.lengthComputable){
    progress.innerHTML = Math.round(100*e.loaded/e.total)+" % complete!";
  }
}

F2E前端爱好者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
http上传文件和进度监控以及构造multipart/form-data请求

http上传文件html代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>http</title> <link rel="stylesheet" href=""> <script
复制链接

扫一扫