DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> 仿iframe效果Aajx文件上傳實例
仿iframe效果Aajx文件上傳實例
編輯:JQuery入門技巧     

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

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

html:

<iframe name="ajaxUpload" style="display:none"></iframe> 
<form name="from1" id="from1" method="post" action="url" enctype="multipart/form-data"target="ajaxUpload"> 
 <table> 
  <tr> 
    <td>附件:</td> 
    <td><input type="file" id="document" name="document"/></td> 
  </tr> 
 </table> 
 </form> 

這裡是重點。要上傳文件enctype這個屬性不可少,target的值改為iframe的name的值。

下面寫一下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沒有內容而且還是不顯示的,所以它刷新了完全不會影響到整個頁面。

以上這篇仿iframe效果Aajx文件上傳實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved