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

http上传文件

html代码


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>httptitle>
    <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//进行标记
        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!";
  }
}

你可能感兴趣的:(厦门,javascript)