asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法(附j(luò)query.form.js下載)
本文實(shí)例講述了asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法。分享給大家供大家參考,具體如下:
首先我們需要做準(zhǔn)備工作:
jquery 點(diǎn)擊此處本站下載。
jquery.form.js 點(diǎn)擊此處本站下載。
頁(yè)面JqueryFormTest.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits="JqueryFormTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="JS/jquery-1.8.0.js" type="text/javascript"></script> <script src="JS/jquery.form.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { $("#fm1").ajaxSubmit({ url: "img.ashx", type: "post", success: function (data) { alert(data); //IE顯示圖片會(huì)默認(rèn)加上<PRE></PRE>,著必須要把去除掉才能在低版本ie顯示 data = data.replace("<PRE>", "").replace("</PRE>", ""); $("#divimg").append("<img src='" + data + "' width='200px' height='200px'/>"); //清空f(shuō)ile控件里面的值 var file = $("#btnfile"); file.after(file.clone().val("")); file.remove(); } }); }); }) </script> </head> <body> <form id="fm1" method="post"> <!--method="post"不能省略,在ie里面必不可少--> <input type="file" id="btnfile" name="btnfile" value="提交" /> <br /> <input type="button" id="btn" value="上傳" /> </form> <div id="divimg"> </div> </body> </html>
img.ashx:
<%@ WebHandler Language="C#" Class="img" %> using System; using System.Web; public class img : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; //獲取上傳的文件的對(duì)象 HttpPostedFile img = context.Request.Files["btnfile"]; //獲取上傳文件的名稱 string s = img.FileName; //截取獲得上傳文件的名稱(ie上傳會(huì)把絕對(duì)路徑也連帶上,這里只得到文件的名稱) string str = s.Substring(s.LastIndexOf("\\") + 1); string path = "~/upload/"+ str; //保存文件 img.SaveAs(context.Server.MapPath(path)); //HttpRuntime.AppDomainAppVirtualPath主要是獲取應(yīng)用程序虛擬路徑名稱,因?yàn)轫憫?yīng)給頁(yè)面時(shí)不會(huì)自動(dòng)添加而導(dǎo)致無(wú)法顯示圖片 context.Response.Write(HttpRuntime.AppDomainAppVirtualPath + path.Substring(1));//path.Substring(1)用來(lái)去除第一個(gè)~字符 } public bool IsReusable { get { return false; } } }
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- ASP.NET Core文件上傳與下載實(shí)例(多種上傳方式)
- 擁有網(wǎng)頁(yè)版小U盤 ASP.NET實(shí)現(xiàn)文件上傳與下載功能
- Asp.net實(shí)現(xiàn)MVC處理文件的上傳下載功能實(shí)例教程
- asp.net 多文件上傳,兼容IE6/7/8,提供完整代碼下載
- asp.net 上傳或下載當(dāng)文件名包含有特殊字符"#"的處理
- asp.net 上傳下載輸出二進(jìn)制流實(shí)現(xiàn)代碼
- asp.net Web Services上傳和下載文件(完整代碼)
- ASP.NET中文件上傳下載方法集合
- ASP.NET實(shí)現(xiàn)文件上傳功能
- ASP.NET Core實(shí)現(xiàn)文件上傳和下載
相關(guān)文章
jQuery中Datatables增加跳轉(zhuǎn)到指定頁(yè)功能
本文給大家分享jquery中datatable增加跳轉(zhuǎn)到指定頁(yè)面功能以及jquery datatable中加入雙擊跳轉(zhuǎn)功能的實(shí)例代碼,需要的朋友參考下2017-02-02jquery實(shí)現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼,涉及jquery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01jquery實(shí)現(xiàn)在網(wǎng)頁(yè)指定區(qū)域顯示自定義右鍵菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)在網(wǎng)頁(yè)指定區(qū)域顯示自定義右鍵菜單效果,涉及jquery鼠標(biāo)點(diǎn)擊及事件綁定等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08Jquery Easyui搜索框組件SearchBox使用詳解(19)
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui搜索框組件SearchBox的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12詳解Jquery Easyui的驗(yàn)證擴(kuò)展
本文主要介紹了Jquery Easyui驗(yàn)證擴(kuò)展,Easyui驗(yàn)證,Easyui校驗(yàn),js正則表達(dá)式。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jQuery實(shí)現(xiàn)QQ空間漢字轉(zhuǎn)拼音功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)QQ空間漢字轉(zhuǎn)拼音功能,結(jié)合具體實(shí)例形式分析了jQuery實(shí)現(xiàn)拼音與中文漢字的轉(zhuǎn)換操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07