仿iframe效果Aajx文件上傳實(shí)例

更新時(shí)間：2016年11月18日 09:26:59 投稿：jingxian

下面小編就為大家?guī)?lái)一篇仿iframe效果Aajx文件上傳實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

后來(lái)看到網(wǎng)上的一些解決方案，有現(xiàn)成的ajax上傳文件的封裝的方法也有利用flash的。flash確實(shí)是個(gè)好方法但是不是每個(gè)人都會(huì)flash的而且下載下來(lái)現(xiàn)成的方法要做修改也不是件易事，且文件相對(duì)較大。最后只好模擬iframe來(lái)實(shí)現(xiàn)。發(fā)現(xiàn)相當(dāng)?shù)暮?jiǎn)單。

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>

這里是重點(diǎn)。要上傳文件enctype這個(gè)屬性不可少，target的值改為iframe的name的值。

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

$(function(){ 
     if($.browser.msie){ 
       window.form1.submit();}else{ 
       $("#form1").submit();} 
    });

這里是做了一個(gè)瀏覽器版本的判斷，因?yàn)镮E是不太符合規(guī)范的一個(gè)瀏覽器，尤其是IE6。IE6是不直接支持$("#idName").submit();這種方式的。

服務(wù)端如下，還得返回一個(gè)值，直接submit是無(wú)法返回值的

public void Upload() 
{ 
  HttpPostedBase ff=Request.Files["document"];//這里是獲取上傳的文件流，也可以用索引值來(lái)表示如果是多個(gè)文件的話 
  string fileName=System.DateTime.Now+ff.FileName.ToString();  //這里取出來(lái)的文件名是沒(méi)有后綴的，所以要保存的話還需要取出文件拓展名。這里就不寫過(guò)細(xì)，只是為描述這樣一個(gè)思路。 
  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();這個(gè)是JS調(diào)用父頁(yè)的方法。因?yàn)楝F(xiàn)在模擬一個(gè)iframe上傳文件，這個(gè)iframe的作用就是一個(gè)中間站的作用。在父頁(yè)點(diǎn)擊上傳后通過(guò)target會(huì)將頁(yè)面文檔流傳入iframe中再上傳服務(wù)端作處理。服務(wù)端有響應(yīng)之后然后再在iframe里面顯示出來(lái)，而不是直接在父頁(yè)面顯示出結(jié)果。這里可能就是一個(gè)alert()彈出一個(gè)對(duì)話框提示一下，如果是這樣那么不調(diào)父頁(yè)方法也行。如果想把這提示的內(nèi)容豐富一點(diǎn)比如彈出個(gè)類似人人網(wǎng)的藍(lán)色的對(duì)話框之類的。 
   } 
}

模擬iframe其實(shí)是頁(yè)面局部更新，但是頁(yè)面中的這個(gè)iframe沒(méi)有內(nèi)容而且還是不顯示的，所以它刷新了完全不會(huì)影響到整個(gè)頁(yè)面。

以上這篇仿iframe效果Aajx文件上傳實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。