封裝了一個ajax多檔案上傳，功能就是選擇多個檔案，用ajax上傳。

呼叫方式也很簡單，寫一個json物件做為引數配置，設定要上傳的服務端url以及選擇檔案和上傳完成等的事件處理函式，new一個AjaxUploadX物件，呼叫selectFiles方法選擇檔案，呼叫uplaod方法上傳。

支援的瀏覽器：Firefox、Chrome、Safari、Opera

使用截圖：

呼叫方法示例：

<button id="btnSelectFiles">選擇檔案</button>
<button id="btnUpload">上傳</button>
<ol id="filesView"></ol>

<script>
    var config = {
        url : "saveupload.php",
        formname : "uploadedfile[]",
        onselectfiles : function (files){
            var s = '';
            for(var i=0, n=files.length;i<n;i++){
                s += '<li>' + files[i].name + ' ('+files[i].size+' bytes)' + '</li>';
            }
            document.getElementById("filesView").innerHTML = s;
        },
        onload : function(e) {
            alert(e.target.responseText);
        },
        uploadHandlers : {
            progress : function(e){}
        }
    };

    var aux = new AjaxUploadX(config);

    document.getElementById("btnSelectFiles").onclick = function (){
        aux.selectFiles();
    }
    document.getElementById("btnUpload").onclick = function (){
        aux.upload();
    }
</script>
 

封裝類的原始碼如下：

/* 
*----------------------------
* AjaxUploadX
* 功能: 1次ajax請求(XMLHttpRequest)上傳多個檔案
* 作者: Igin Cui, 2012/8/20
* 聯絡我: @IginCui (新浪微博)
*         [email protected]
*         http://blog.csdn.net/cuixiping
*----------------------------
*/
/* 本例在Firefox 14, Chrome 20測試通過，未測試其他瀏覽器 */
/* IE9不支援files特性，所以本例不支援IE9 */
function AjaxUploadX(ops){
    if(!window.FormData || !window.FileList){
        //throw('Your browser does not support ajax upload');
        throw('您的瀏覽器不支援ajax upload');
    }
    this.options = ops||{};
    this._init();
}
AjaxUploadX.prototype = {
    _init: function (){
        var ele = document.createElement('input');
        ele.multiple=this.options.multiple!==false;
        ele.type='file';
        ele.style.display='none';
        document.body.appendChild(ele);
        var THIS = this;
        ele.onchange = function (e){
            THIS._onchange(e);
        }
        this._input = ele;
    },
    _destroy: function (){
        document.body.removeChild(this._input);
    },
    _onchange: function (e){
        var ops = this.options;
        if(ops.onselectfiles){
            ops.onselectfiles(e.target.files);
        }
    },
    selectFiles: function (){
        this._input.click();
    },
    upload: function (){
      var xhr = new XMLHttpRequest();
      var ops = this.options;

      var v, h, evs = {loadstart:0, loadend:0, progress:0, load:0, error:0, abort:0};
      for(v in evs){
        if(h = ops['on'+v]){
            xhr.addEventListener(v, h, false);
        }
        if(ops['uploadHandlers'] && (h = ops['uploadHandlers']['on'+v])){
            xhr.upload.addEventListener(v, h, false);
        }
      }

      var data = new FormData();

      var files = this._input.files;
      if(!files.length){
          this.options.onerror('No files');
          return;
      }
      for(var i=0, n=files.length;i<n;i++){
        data.append(ops.formname || "uploadedfile[]",  files[i]);
      }

      xhr.open("POST", ops.url, true);
      xhr.send(data);
    }
};
 

demo中包含封裝類，呼叫示例html,js，儲存上傳檔案的php.

新浪微博: @IginCui 

~~