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;
        }
    }

}

完！！

posted @ 2017-01-12 10:09 冲天小肥牛阅读(2693) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

王炜忠

website一个页面两个wangEditor，一个上传图片功能

公告