仿iframe效果Aajx文件上傳實(shí)例
前段時(shí)間在解決ajax上傳文件時(shí)折騰了好一陣。直接用$.post上傳文本信息肯定是沒有問題的。但是$.post直接上傳圖片是不可行的。
后來看到網(wǎng)上的一些解決方案,有現(xiàn)成的ajax上傳文件的封裝的方法也有利用flash的。flash確實(shí)是個(gè)好方法 但是不是每個(gè)人都會(huì)flash的而且下載下來現(xiàn)成的方法要做修改也不是件易事,且文件相對較大。最后只好模擬iframe來實(shí)現(xiàn)。發(fā)現(xiàn)相當(dāng)?shù)暮唵巍?/p>
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的庫是必不可少的。
$(function(){ if($.browser.msie){ window.form1.submit();}else{ $("#form1").submit();} });
這里是做了一個(gè)瀏覽器版本的判斷,因?yàn)镮E是不太符合規(guī)范的一個(gè)瀏覽器,尤其是IE6。IE6是不直接支持$("#idName").submit();這種方式的。
服務(wù)端如下,還得返回一個(gè)值,直接submit是無法返回值的
public void Upload() { HttpPostedBase ff=Request.Files["document"];//這里是獲取上傳的文件流,也可以用索引值來表示如果是多個(gè)文件的話 string fileName=System.DateTime.Now+ff.FileName.ToString(); //這里取出來的文件名是沒有后綴的,所以要保存的話還需要取出文件拓展名。這里就不寫過細(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àn)楝F(xiàn)在模擬一個(gè)iframe上傳文件,這個(gè)iframe的作用就是一個(gè)中間站的作用。在父頁點(diǎn)擊上傳后通過target會(huì)將頁面文檔流傳入iframe中再上傳服務(wù)端作處理。服務(wù)端有響應(yīng)之后然后再在iframe里面顯示出來,而不是直接在父頁面顯示出結(jié)果。這里可能就是一個(gè)alert()彈出一個(gè)對話框提示一下,如果是這樣那么不調(diào)父頁方法也行。如果想把這提示的內(nèi)容豐富一點(diǎn)比如彈出個(gè)類似人人網(wǎng)的藍(lán)色的對話框之類的。 } }
模擬iframe其實(shí)是頁面局部更新,但是頁面中的這個(gè)iframe沒有內(nèi)容而且還是不顯示的,所以它刷新了完全不會(huì)影響到整個(gè)頁面。
以上這篇仿iframe效果Aajx文件上傳實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery多級(jí)聯(lián)動(dòng)下拉插件chained用法示例
這篇文章主要介紹了jQuery多級(jí)聯(lián)動(dòng)下拉插件chained用法,結(jié)合實(shí)例形式分析了jQuery多級(jí)聯(lián)動(dòng)下拉插件chained的功能與基本使用技巧,需要的朋友可以參考下2016-08-08jquery實(shí)現(xiàn)彈出div,始終顯示在屏幕正中間的簡單實(shí)例
本篇文章主要是對jquery實(shí)現(xiàn)彈出div,始終顯示在屏幕正中間的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03jQuery News Ticker 基于jQuery的即時(shí)新聞行情展示插件
今天分享一個(gè)新聞行情的jQUery插件,可以幫助大家使用比較小的頁面區(qū)域來展示最新最重要的信息。2011-11-11jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式淘寶動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式淘寶動(dòng)畫效果,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2018-02-02JQuery實(shí)現(xiàn)簡單驗(yàn)證碼提示解決方案
驗(yàn)證碼提示功能在ui界面的登陸及提交窗口中起到了一定的有好作用,極大的提高了用戶體驗(yàn),本文帶著這個(gè)美好的祝愿為您實(shí)現(xiàn)簡單驗(yàn)證碼提示,需要的朋友可以了解下2012-12-12基于jquery實(shí)現(xiàn)的移入頁面上空文本框時(shí),讓它變?yōu)榻裹c(diǎn),移出清除焦點(diǎn)
基于jquery實(shí)現(xiàn)的移入頁面上空文本框時(shí),讓它變?yōu)榻裹c(diǎn),移出清除焦點(diǎn)的實(shí)現(xiàn)代碼。2011-07-07