ueditor图片上传插件的使用

在项目里使用到ueditor图片上传插件，以前图片上传都是直接使用js代码直接上传图片，比较麻烦，而且效率也比较低，而ueditor这款插件完美的解决了这个问题，这个是百度开发的一款富文本编辑器，在这里我们只是使用图片上传功能。

直接上代码

1.js和css引入

这三个引用很重要，是必须要引用进来的。

 <link href="/Content/UEditor/themes/default/css/ueditor.min.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" charset="utf-8" src="/Content/UEditor/ueditor.config.js"></script>
 <script type="text/javascript" charset="utf-8" src="/Content/UEditor/ueditor.all.min.js"></script>

2、html代码

首先我们需要创建一个div作为上传弹窗，也可以创建一个input来存放得到的上传的图片路径值

 <div id="dlgInfo"></div>
2 <input id="attType" hidden type="text" value="" />

    <div style="width:100%;height:240px;">
        <img id="Image" src="~/images/upload3.jpg" onclick="RoomPictureUtils.uploadImgs(this)" style="width: 100px; height: 100px;padding:10px;" />
    </div>

3、js代码

记住一点要先初始化图片上传的脚本，否则会导致我们使用的一些方法无法识别。

 $(function(){
    //初始化图片上传
    RoomPictureUtils.init();
 });

下面的是将上传图片的方法写到一个对象里面，可以参考改写自己的方法。
 1  //上传图片控件
     var RoomPictureUtils = Window.RoomPictureUtils = {};
     (function (Util) {
         Util.init = function () {
             Util.initUE();
         };

         //上传控件初始化
         Util.initUE = function () {

             $("#dlgInfo").after("<div id=\"ueditorupload\"></div>");
             UE.delEditor("ueditorupload");
             Util.ue = UE.getEditor('ueditorupload', { autoHeightEnabled: false });
             Util.ue.ready(function () {
                 Util.ue.hide();
             });

             //监听图片上传
             Util.ue.addListener('beforeInsertImage', function (t, args) {
                 Util.saveLP_Pictures(args);
             });
         }

         Util.uploadImgs = function (attType) {
             $("#attType").val(attType.id);
             var dlg = Util.ue.getDialog("insertimage");
             dlg.open();
         };

         Util.saveLP_Pictures = function (args) {
             //关闭图片上传插件
             debugger;
             var dlg = Util.ue.getDialog("insertimage");
             dlg.close();
             var id = $("#attType").val();
             var count = args.length;
             var picSrc = "";
             if (count>0) {
                 for (var i in args) {
                     var obj = args[i];
                     $("#Image").before('<img id="images' + (parseInt(i)) + '" src="' + obj.src + '"  class="images" style="height: 100px; width: 100px;padding:10px;" />');
                     picSrc += obj.src + ",";
                 }
             }
             picSrc = picSrc.substring(0, picSrc.length - 1);
             $("#Attachments").val(picSrc);
         };

         Util.deleteFY_RoomItemImg = function (pid, orderNo, event) {
             if (!confirm("确定要删除吗?")) return;
             var url = "/FY_RoomPictures/Delete";
             var data = { "id": pid };
             $.post(url, data, function (res) {
                 var result;
                 if (typeof res != "object")
                     result = $.parseJSON(res);
                 else {
                     result = res;
                 }
                 if (result == null) {
                     MSG.Error("程序异常错误");
                     return;
                 }
                 if (result.ErrorCode != "00") {
                     MSG.Error(result.ErrorMsg);
                     return;
                 }
                 else {
                     event = event ? event : window.event;
                     var obj = event.srcElement ? event.srcElement : event.target;
                     var $obj = $(obj);
                     $obj.parent().parent().remove();
                     MSG.Success("删除成功");
                 }
             });

         }

         Util.loadRoomItemPicture = function (orderNO) {
             var roomNO = Util.getRoomNO();
             if (!roomNO) {
                 MSG.Error("房源的编号丢失，请刷新本页面从新加载");
                 return;
             }
             var url = "/FY_RoomPictures/FY_RoomPicItem?roomNo=" + roomNO + "&orderNo=" + orderNO + "&_=" + (new Date()).valueOf();
             $('#frmAjax #images' + orderNO + ' ul.filelist').load(url, null);
         }

     })(RoomPictureUtils);

4、效果