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

来源：互联网发布：易观千帆数据哪来的编辑：程序博客网时间：2024/06/05 10:40

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!";  }}

0 0