利用iframe無刷新上傳文件的坑

頁面裏常常要用到文件上傳的功能，並且要求頁面不刷新，先說一下原理：頁面裏放一個file控件和submit按鈕，外面用form表單包住，給form表單加上對應的屬性值，action、method、entype、name，到這一步，能上傳文件了，可是這樣上傳文件會刷新頁面，這不是咱們想要的。咱們要的是文件上傳時不刷新頁面，那麼也簡單，在頁面裏放一個iframe，設置它的寬高爲0，這裏有兩個坑：

一、須要設置iframe的name值與form的target屬性值同樣，意思就是把form表單上傳文件的刷新轉嫁到iframe裏去了；

二、form表單的enctype屬性值必須設置成multipart/form-data，將文件轉換成文件流供後端接收；

代碼以下：

<iframe name="fileUpload"></iframe>
<form method="post" action="xxxx" enctype="multipart/form-data" name="fileForm" target="fileUpload">
    <input type="file" class="fileInput" name="fileInput">
    <input type="submit" value="提交" />
</form>

頁面（這裏爲了看到效果，就不將iframe的寬高設爲0了）：

事情就這麼愉快地結束了嗎？固然沒有，離國慶節還有那麼些天，不要着急。

到這裏文件能上傳了，頁面也不會刷新，那麼還差什麼？固然是精益求精--優化啦。怎麼優化？假如頁面裏有三個地方須要上傳不一樣類型的文件，最好的辦法確定不是在頁面裏將代碼copy三份，而後就這樣用，這是普通開發的作法，咱們能夠利用js動態生成上面這些代碼，須要上傳文件的地方，一個函數加參數就搞定了，代碼以下：

/*2014年9月18日17:39:47 By 王美建*/
function ajaxUpload(opt){
    /*
        參數說明:
        opt.frameName : iframe的name值;
        opt.url : 文件要提交到的地址;
        opt.fileName : file控件的name;
        opt.format : 文件格式，以數組的形式傳遞，如['jpg','png','gif','bmp'];
        opt.callBack : 上傳成功後回調;
    */
    var iName=opt.frameName; //太長了，變短點
    var iframe,form;
    //建立iframe和form表單
    iframe = $('<iframe name="'+iName+'" />');
    form = $('<form method="post" style="display:none;" target="'+iName+'" action="'+opt.url+'"  name="form_'+iName+'" enctype="multipart/form-data" />');
    file = $('<input type="file" name="'+opt.fileName+'" />');
    file.appendTo(form);
    //插入body
    $(document.body).append(iframe).append(form);
    //觸發瀏覽事件，選擇文件
    file.click();
    //選中文件後，驗證文件格式是否符合要求
    file.change(function(){
        //取得所選文件的擴展名
        var fileFormat=$(this).val().exec(/\.[a-zA-Z]+$/)[0].substring(1);
        if(opt.format.join('-').indexOf(fileVal)!=-1){
            form.submit();//格式經過驗證後提交表單;
        }else{
            iframe.remove();
            form.remove();
            alert('文件格式錯誤，請從新選擇！');
        }
    });
    //文件提交完後
    iframe.load(function(){
        var data = $(this).contents().find('body').html();
        opt.callBack(data);
        iframe.remove();
        form.remove();
    })
}

使用方法：在頁面裏放一個按鈕Btn，點擊Btn時觸發ajaxUpload方法，ajaxUpload方法內部自動建立上傳所須要的元素並自動觸發file.click()事件供用戶選擇文件，選中文件後自動驗證文件格式並提交，而後返回後端返回的結果，到這裏，問題解決了80%，爲何不是100%？ajaxUpload方法在IE8以上及火狐、chrome瀏覽器都沒有問題，但在IE8及如下的瀏覽器上傳文件會提示：沒有權限！這是由於低版本的IE作了安全限制，file控件必須由用戶主動點擊觸發選擇的文件才能夠上傳，而不能使用js的click事件來模擬點擊觸發。在此我又想說，IE我~！@#￥%……&*（）——……。

辦法總比困難多，既然必定要由用戶點擊來觸發，那麼直接把頁面裏的按鈕替換成file控件吧，iframe和form仍是動態建立，當用戶點擊file控件選擇文件後，會觸發file控件的chang事件，給file控件的change事件綁定ajaxUpload方法並將file控件的id傳進去，ajaxUpload方法經過id獲取file控件並將file控件appendTo到動態建立的form裏，以後的步驟與上面無異——驗證格式→提交表單→觸發回調。細心的同窗會發現，選擇文件後，file控件會appendTo到form表單裏，那頁面裏放file控件的地方不是空了麼？而且，表單提交後，file會隨着form一塊兒被remove掉，因此，在file控件appendTo到form前，先建一個變量P將file控件的父級存起來，form表單提交以後，先將file控件appendTo回到P裏面，固然，file控件appendTo到form時，file控件依然會在頁面裏消失，因此頁面裏的Btn要保留，把file控件定位在Btn上面，透明度設置成0，這樣點擊Btn實際上點擊的是蓋在上面的file控件，這樣即便file控件被appendTo到form裏面，用戶也不會察覺到什麼變化，問題迎刃而解！兼容的寫法以下:

/*2014年9月19日11:11:07 By 王美建*/
function ajaxUpload(opt){
    /*
        參數說明:
        opt.id : 頁面裏file控件的ID;
        opt.frameName : iframe的name值;
        opt.url : 文件要提交到的地址;
        opt.format : 文件格式，以數組的形式傳遞，如['jpg','png','gif','bmp'];
        opt.callBack : 上傳成功後回調;
    */
    var iName=opt.frameName; //太長了，變短點
    var iframe,form,file,fileParent;
    //建立iframe和form表單
    iframe = $('<iframe name="'+iName+'" />');
    form = $('<form method="post" style="display:n1one;" target="'+iName+'" action="'+opt.url+'"  name="form_'+iName+'" enctype="multipart/form-data" />');
    file = $('#'+opt.id); //經過id獲取flie控件
    fileParent = file.parent(); //存父級
    file.appendTo(form);
    //插入body
    $(document.body).append(iframe).append(form);

    //取得所選文件的擴展名
    var fileFormat=/\.[a-zA-Z]+$/.exec(file.val())[0].substring(1);
    if(opt.format.join('-').indexOf(fileFormat)!=-1){
        form.submit();//格式經過驗證後提交表單;
    }else{
        file.appendTo(fileParent); //將file控件放回到頁面
        iframe.remove();
        form.remove();
        alert('文件格式錯誤，請從新選擇！');
    };

    //文件提交完後
    iframe.load(function(){
        var data = $(this).contents().find('body').html();        
        file.appendTo(fileParent);
        iframe.remove();
        form.remove();
        opt.callBack(data);
    })
}

國際慣例，到這裏，方法已經接近完美了，爲何是接近？來看一張圖片：

結構代碼：

.fileInput{ position: absolute;left: 0;top: 0;height: 30px; filter:alpha(opacity=60);opacity:0.6; background-color: transparent;}
.btn{width: 200px;height: 30px; margin: 100px auto; background-color: yellow; text-align: center; line-height: 30px; overflow: hidden; display: block; position: relative;}
<div class="btn">選擇文件<input type="file" class="fileInput" name="fileInput"></div>

這就是放在頁面裏的file控件，外面用一個div包住，在IE10及如下瀏覽器中，用戶單擊紅色框部分是不會彈出文件選擇框的，必須單擊藍色部分或雙擊紅色部分才行，要讓藍色部分佔滿外面的div怎麼作到呢？用css設置寬度只會增長紅色部分的寬度，這時咱們會發現藍色部分是有字的，對，能夠經過設置font-size來使藍色部分變寬，而後給file控件加上dir="rtl"，這會讓瀏覽按鈕移到左邊，再給.btn加上overflow:hidden，能夠發現瀏覽按鈕已經佔滿整個div了，以下圖：
到這裏才真正完成了100%，最後，咱們還能夠給file控件設置accept屬性，限制可選文件格式（IE8及如下不支持該屬性），別忘了把file控件的透明的改成0。