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

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

傳統(tǒng)表單文件上傳估計(jì)是運(yùn)用最廣泛和最簡(jiǎn)單的技術(shù)了，說它簡(jiǎn)單是因?yàn)橹灰付ū韱蔚?strong>enctype為multipart/form-data，就行了。簡(jiǎn)單可靠所以被運(yùn)用的廣泛。傳統(tǒng)表單上傳示例如下所示：

表單中的action參數(shù)指的是后臺(tái)處理上傳文件的接口。target參數(shù)規(guī)定了規(guī)定在何處打開 action URL，常見的參數(shù)有_blank、_self、__top或者指定的iframe。method參數(shù)規(guī)定了表單提交的方式，這里只能使用**post**方式提交，而不能用**get**方式。最后enctype的參數(shù)規(guī)定了在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼方式，常見的參數(shù)有**application/x-www-form-urlencoded**、**text/plain**和示例中的**multipart/form-data**，因?yàn)樯蟼鞯奈募际欠羌兾谋緜鬏敚灾付ǖ念愋捅仨氈荒苁?*multipart/form-data**。

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

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

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

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

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

具體的原理是，在點(diǎn)擊提交按鈕時(shí)，動(dòng)態(tài)的生成一個(gè)隱藏iframe加入到頁面上，并且 將form 的 target指向該隱藏iframe，服務(wù)端就接收到上傳的file文件，并進(jìn)行相應(yīng)的操作，然后將返回結(jié)果返回到隱藏的iframe里面，這時(shí)我們可以與后端開發(fā)約定返回結(jié)果的格式，可以是json格式，便于我們前端操作，然后前端部分就可以用iframe.contentWindow.document.body.innerHTML來獲取后端返回的結(jié)果，進(jìn)行相應(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ǎn)擊提交未上傳時(shí)回調(diào)
            afterUpLoad: function() {} //點(diǎn)擊提交上傳后回調(diào)
        };

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

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

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

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

        //生成一個(gè)隱藏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(); //提交表單

        //點(diǎn)擊提交后觸發(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("上傳后");
    }
}); 

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

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

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

那怎樣通過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);
}    

這個(gè)屬性彌補(bǔ)了ajax1不能異步上傳文件的不足。

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

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