//注意:引用的css時候要把網上下載的wangEditor文件夾整個放在項目中,需要引用那個就直接拖,如果不把文件夾放在項目中,wangEditor上面的標識符會現實亂碼,但是功能還在!
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="dist/css/wangEditor.min.css" rel="stylesheet" /> <script src="dist/js/lib/jquery-1.10.2.min.js"></script> <script src="jquery.form.js"></script><%--上傳圖片的jQuery--%> <style> #a { width: 100%; height: 300px; border: 1px solid red; } #b { width: 100%; height: 300px; border: 1px solid red; } #file_upload { width:50%; border:1px solid red; } </style> </head> <body> <form id="form1" runat="server" method="post"> <div id="a"></div><%--第一個富文本--%> <input id="btn1" type="button" value="查看代碼1" /> <br /><br /> <div id="b"></div><%--第二個富文本--%> <input id="btn2" type="button" value="查看代碼2" /> <br /><br /> <br /> <input type="file" id="file_upload" name="file_upload" value="" /> <br /> <input type="button" id="topimg_btn" value="上傳" /> </form> </body> </html><script src="dist/js/wangEditor.min.js"></script> <script> new wangEditor("a").create();//生成第一個富文本 $("#btn1").click(function () {//獲取第一個富文本內容的代碼 var txt = $("#a").html(); alert(txt); }); new wangEditor("b").create();//生成第二個富文本 $("#btn2").click(function () {//獲取第二個富文本內容的代碼 var txt = $("#b").html(); alert(txt); }); $("#topimg_btn").click(function () {//上傳按鈕的點擊事件 $("#form1").ajaxSubmit({ url: "ajax/img.ashx", type: "post", success: function (data) { alert(data); //IE顯示圖片會默認加上<PRE></PRE>,着必須要把去除掉才能在低版本ie顯示 data = data.replace("<PRE>", "").replace("</PRE>", ""); //清空file控件里面的值 var file = $("#file_upload"); file.after(file.clone().val("")); file.remove(); } }); }); </script>
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"; //獲取上傳的文件的對象 HttpPostedFile img = context.Request.Files["file_upload"]; //獲取上傳文件的名稱 string s = img.FileName; //截取獲得上傳文件的名稱(ie上傳會把絕對路徑也連帶上,這里只得到文件的名稱) string str =DateTime.Now.ToString("yyyyMMddhhmmss")+s.Substring(s.LastIndexOf("\\") + 1); string path = "~/images/" + str; //保存文件 s img.SaveAs(context.Server.MapPath(path)); //HttpRuntime.AppDomainAppVirtualPath主要是獲取應用程序虛擬路徑名稱,因為響應給頁面時不會自動添加而導致無法顯示圖片 context.Response.Write(HttpRuntime.AppDomainAppVirtualPath + path.Substring(1));//path.Substring(1)用來去除第一個~字符 } public bool IsReusable { get { return false; } } }
完!!