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

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

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

2、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。

?

posted on 2014-09-21 17:44 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/3984766.html

總結

以上是生活随笔為你收集整理的利用iframe无刷新上传文件的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。