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

來源:互聯網
上載者:User

前段時間在解決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沒有內容而且還是不顯示的,所以它重新整理了完全不會影響到整個頁面。 

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.