頁面無重新整理ajax上傳檔案–類比iframe，超簡單

前段時間在解決ajax上傳檔案時折騰了好一陣。直接用$.post上傳文本資訊肯定是沒有問題的。但是$.post直接上傳圖片是不可行的。

後來看到網上的一些解決方案，有現成的ajax上傳檔案的封裝的方法也有利用flash的。flash確實是個好方法 但是不是每個人都會flash的而且下載下來現成的方法要做修改也不是件易事，且檔案相對較大。

最後只好類比iframe來實現。發現相當的簡單。

<iframe name="ajaxUpload" style="display:none"></iframe>

<form name="from1" id="from1" method="post" action="url"  enctype="multipart/form-data" target="ajaxUpload">     這裡是重點。要上傳檔案enctype這個屬性不可少，target的值改為iframe的name的值。

<table>

   <tr>

      <td>附件:</td>

      <td><input type="file" id="document" name="document"/></td> 

   </tr> 

</table> 

</form>

 

上面是HTML

下面寫一下js代碼，我是用的jQuery所以在用的時候載入jquery的庫是必不可少的。

 $(function(){

        if($.browser.msie){

             window.form1.submit();}else{

             $("#form1").submit();}

       });

 //這裡是做了一個瀏覽器版本的判斷，因為IE是不太符合規範的一個瀏覽器，尤其是IE6。IE6是不直接支援$("#idName").submit();這種方式的。

然後在服務端要怎麼著呢，而且還得返回一個值，直接submit是無法傳回值的

public void Upload()

{

    HttpPostedBase ff=Request.Files["document"];//這裡是擷取上傳的檔案流，也可以用索引值來表示如果是多個檔案的話

   string fileName=System.DateTime.Now+ff.FileName.ToString();   //這裡取出來的檔案名稱是沒有尾碼的，所以要儲存的話還需要取出檔案拓展名。這裡就不寫過細，只是為描述這樣一個思路。

    try{

          SaveAs(documentPath+fileName+extendtionName); 

           Response.Write("<script type='text/javascript' type='language'>parent.window.callBackMethod('上傳成功');</scrpt>");

       } 

     catch

     {

       Response.Write("<script type='text/javascript' type='language'>parent.window.callBackMethod('上傳失敗');</scrpt>");  //parent.window.methodName();這個是JS調用父頁的方法。因為現在類比一個iframe上傳檔案，這個iframe的作用就是一個中間站的作用。在父頁點擊上傳後通過target會將頁面文檔流傳入iframe中再上傳服務端作處理。服務端有響應之後然後再在iframe裡面顯示出來，而不是直接在父頁面顯示出結果。這裡可能就是一個alert()彈出一個對話方塊提示一下，如果是這樣那麼不調父頁方法也行。如果想把這提示的內容豐富一點比如彈出個類似人人網的藍色的對話方塊之類的。

     } 

} 

 類比iframe其實是頁面局部更新，但是頁面中的這個iframe沒有內容而且還是不顯示的，所以它重新整理了完全不會影響到整個頁面。