摘要：概述文件上傳是一個很常見的需求，實現(xiàn)文件上傳的技術(shù)也很多。幫助文檔模擬無刷新的文件上傳功能頁面無刷新上傳文件模擬，超簡單為什么上傳文件的表單里要加個屬性接口對象的介紹使用對象涉及文章侵權(quán)，請郵件告知。

文件上傳是一個很常見的需求，實現(xiàn)文件上傳的技術(shù)也很多。下面就談?wù)勔恍┏Ｒ姷纳蟼骷夹g(shù)以及它們的優(yōu)劣。

傳統(tǒng)表單文件上傳估計是運用最廣泛和最簡單的技術(shù)了，說它簡單是因為只要指定表單的enctype為multipart/form-data，就行了。簡單可靠所以被運用的廣泛。傳統(tǒng)表單上傳示例如下所示：

表單中的action參數(shù)指的是后臺處理上傳文件的接口。target參數(shù)規(guī)定了規(guī)定在何處打開 action URL，常見的參數(shù)有_blank、_self、__top或者指定的iframe。method參數(shù)規(guī)定了表單提交的方式，這里只能使用**post**方式提交，而不能用**get**方式。最后enctype的參數(shù)規(guī)定了在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進行編碼方式，常見的參數(shù)有**application/x-www-form-urlencoded**、**text/plain**和示例中的**multipart/form-data**，因為上傳的文件都是非純文本傳輸，所以指定的類型必須只能是**multipart/form-data**。

這種方式的局限性是不能批量處理，而且表單上傳是同步的，表單已提交，頁面就會刷新。

如果你想實現(xiàn)異步提交文件，且可以進行批量處理文件，那么只能通過第三方插件來實現(xiàn)了，第三方插件實現(xiàn)技術(shù)有很多，比如Flash、java applet、ActiveX等技術(shù)，其中Flash技術(shù)是運用最廣泛、最成熟的一種方案。

不過第三方插件已經(jīng)不屬于前端開發(fā)范圍了，所以不會詳細(xì)細(xì)說。不過到時可以我常用的FLash上傳插件有SWFupload、uploadfile、百度的webupload等。

第三方插件的好處是能做批量處理、異步提交。缺點也是顯而易見的是要瀏覽器支持。

說到異步，可能有人會說，能不能通過ajax來實現(xiàn)文件的異步上傳呢？想法很美好，現(xiàn)實卻很殘酷，ajax與后端通信 只能傳送字符串，是無法傳遞實體文件的，所以用ajax是無法實現(xiàn)直接文件上傳的。不過我們卻可以在頁面“埋”一個隱藏iframe來模擬文本的異步提交。

具體的原理是，在點擊提交按鈕時，動態(tài)的生成一個隱藏iframe加入到頁面上，并且 將form 的 target指向該隱藏iframe，服務(wù)端就接收到上傳的file文件，并進行相應(yīng)的操作，然后將返回結(jié)果返回到隱藏的iframe里面，這時我們可以與后端開發(fā)約定返回結(jié)果的格式，可以是json格式，便于我們前端操作，然后前端部分就可以用iframe.contentWindow.document.body.innerHTML來獲取后端返回的結(jié)果，進行相應(yīng)的parseJSON處理，即可像處理ajax返回的json一樣，處理數(shù)據(jù)。

示例代碼如下所示：

/**
 * 模擬ajax無刷新文件上傳
 */
var fileUpLoad = function(config) {

    var ifr = null,
        fm = null,
        defConfig = {
            submitBtn: $("#J_submit"), //提交按鈕
            complete: function(response) {}, //上傳成功后回調(diào)
            beforeUpLoad: function() {}, //點擊提交未上傳時回調(diào)
            afterUpLoad: function() {} //點擊提交上傳后回調(diào)
        };

    //靜態(tài)變量
    var IFRAME_NAME = "fileUpLoadIframe";

    //配置
    config = $.extend(defConfig, config);

    //綁定submit事件
    config.submitBtn.bind("click", function(e){
        e.preventDefault();

        //點擊提交前觸發(fā)事件, 函數(shù)返回false可阻止提交表單，用于file為空判斷
        if (config.beforeUpLoad.call(this) === false) {
            return;
        }

        //生成一個隱藏iframe，并設(shè)置form的target為該iframe，模擬ajax效果
        ifr = $("");
        fm = this.form;

        ifr.appendTo($("body"));
        fm.target = IFRAME_NAME; //target目標(biāo)設(shè)為ifr

        //上傳完畢iframe onload事件
        ifr.load(function(){
            var response = this.contentWindow.document.body.innerHTML;

            config.complete.call(this, response);
            ifr.remove();
            ifr = null; //清除引用
        });

        fm.submit(); //提交表單

        //點擊提交后觸發(fā)事件
        config.afterUpLoad.call(this);

    });

};

調(diào)用方式如下：

   fileUpLoad({
    submitBtn: $("#J_submit"),
    complete: function(response){ //上傳成功后處理回調(diào)
        var d = $.parseJSON(response);

        alert("返回成功")
        console.log(d);
    },
    beforeUpLoad: function() {
        alert("上傳前");
    },
    afterUpLoad: function() {
        alert("上傳后");
    }
}); 

這種方式的好處是，雖然不是異步提交，但是給人的感覺好像是通過異步方式上傳了文件。缺點是依然不能進行批量處理文件。

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進制文件.其兼容性如下所示：

有圖可知，這個接口兼容性在IE上表現(xiàn)的并不是很好，最新只支持IE10+，不過IE10+的市場份額現(xiàn)在還不是很多，如果你考慮兼容性的話，建議不要使用這個接口。

那怎樣通過FormData上傳文件呢?？梢詤⒖枷旅娴拇a。
html結(jié)構(gòu)：

  Your email address:
  

  Custom file label:
  

  File to stash:
  


Stash the file!   

腳本代碼：

function sendForm() {
  var oOutput = document.getElementById("output");
  var oData = new FormData(document.forms.namedItem("fileinfo"));

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.
";
    }
  };

  oReq.send(oData);
}    

這個屬性彌補了ajax1不能異步上傳文件的不足。

模擬AJAX無刷新的文件上傳功能
頁面無刷新ajax上傳文件--模擬iframe，超簡單
為什么上傳文件的表單里要加個屬性enctype
FormData接口對象的介紹
使用FormData對象

ps:涉及文章侵權(quán)，請郵件告知。