前段時間在解決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& gt;");

?????? }

???? catch

???? {

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

???? }

}

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

轉載于:https://www.cnblogs.com/jizonghai/archive/2013/01/09/2853170.html

總結

以上是生活随笔為你收集整理的页面无刷新ajax上传文件--模拟iframe，超简单的全部內容，希望文章能夠幫你解決所遇到的問題。

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