website一個頁面兩個wangEditor,一個上傳圖片功能


//注意:引用的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;
        }
    }

}

完!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM