郑德才博客 记录学习,记录工作,学习知识分享!

asp.net实现ueditor图片上传单独调用功能

页面中添加一个“点击上传”图片按钮,给这个按钮或超链接添加单击事件

<script type="text/javascript" src="../scripts/jquery-1.9.0.min.js"></script>
<script src="../scripts/Ueditor/editor_config.js" type="text/javascript"></script>
<script src="../scripts/Ueditor/editor_all_min.js" type="text/javascript"></script>

<table>              

   <tr>

        <td style="text-align: right; width: 110px;">
            logo:</td>
        <td colspan="3">
                <div id="imgInfo" style="display:none;"><img src="" alt="" width="200" height="200" /></div>
                   <a href="#" id="upImg">点击上传</a><span style="margin-left:50px;">图片大小:200*200</span>
         </td>
     </tr>
</table>

//jquery代码,记得把jquery和百度编辑器Editor的js引用进来

<script type="text/javascript">
    $(function () {
        $("#upImg").click(function () { //按钮或超链接添加单击事件
            upImage(); //调用打开上传图片的方法
        });
    });
    //百度图片上传 
    var myEditorImage; 
    var d; 
    function upImage() {
        d = myEditorImage.getDialog("insertimage"); //上传图片的窗体
        d.render();
        d.open(); //给打开上传窗体
    }
    myEditorImage= new UE.ui.Editor(); 
    myEditorImage.render('myEditorImage');
    myEditorImage.ready(function () {
        myEditorImage.setDisabled();
        myEditorImage.hide(); //隐藏UE框体 
        myEditorImage.addListener('beforeInsertImage', function (t, arg) {
            if (arg.length > 1) {
                alert("log只能上传一张图片!");
            }
            $("#imgInfo").show();
            $("#imgInfo").find("img").attr("src", arg[0].src); //把上传后确定返回的图片地址放到div中显示出来
            $("#LogoPicText").attr("value", arg[0].src); //把图片地址赋值给页面input,我这里使用了jquery,可以根据自己的写法赋值,到这里就很简单了,会js的都会写了。  LogoPicText就没有弄在上面了,就是一个简单的input或asp.net的文本控件         
        });
    });
</script>

2013年7月15日 | 发布:郑德才博客 | 分类:学习之路 | 评论:18

留言列表:

  • 不夜城手机报价 发布于 2013/7/24 10:46:25  回复
  • 您好,我是不夜城手机报价网的,您的文章写的不错,过来学习了!欢迎回访
  • 樱桃淘yingtaotao 发布于 2013/7/31 9:21:49  回复
  • 文章写的很不错!很喜欢,赞一个,亲~有更新记得通知哦~。爱美丽的你,就喜欢秀自己!来樱桃淘,淘出美丽,秀出最炫的你!
  • 天骄之弓 发布于 2013/8/11 13:51:44  回复
  • 支持博主哦···博主是个细心的人那
    户外射击用品专卖 复合弓 直拉弓 反曲弓 传统弓
  • 逆袭之地 发布于 2013/8/15 16:17:00  回复
  • 找了好久 终于找到方法了
  • 三利达户外 发布于 2013/8/25 18:32:54  回复
  • 顶 支持博主
  • 大黑鹰三利达户外 发布于 2013/10/4 14:27:04  回复
  • 支持博主。
  • 复合弓专卖 发布于 2013/10/11 10:44:51  回复
  • 顶支持博主 加油了
  • csy 发布于 2013/12/3 15:41:14  回复
  • 请问你的百度编辑器的版本是多少?为什么我不能用呢?
    • 郑德才博客 发布于 2013/12/7 13:23:24  回复
    • 应该基本都能用吧
  • 如何减肥 发布于 2013/12/5 19:25:54  回复
  • 好复杂哦
  • 天骄之弓复合弓专卖 发布于 2013/12/8 19:28:01  回复
  • 顶 谢谢博主分享哦
  • 卵巢保养 发布于 2013/12/26 10:35:25  回复
  • 眼花,看不懂。
    谢谢分享
  • 民治婚纱摄影 发布于 2013/12/29 12:46:45  回复
  • 龙华婚纱摄影 发布于 2014/1/4 14:55:08  回复
  • 支持……看起来很深奥
  • 衣流商城 发布于 2014/1/31 22:06:04  回复
  • 可以根据自己的写法赋值,到这里就很简单了
  • 垂直绿化 发布于 2014/2/19 14:39:20  回复
  • 可以使用,不错。
  • 大黑鹰 发布于 2014/3/12 13:50:27  回复
  • 顶 支持博主 加油了
  • 护栏网 发布于 2014/3/18 9:59:34  回复
  • 如果我本人
  • 丝网 发布于 2014/3/25 15:13:44  回复
  • 期待回访

发表留言: