ueditor图片上传插件的使用

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

直接上代码

1.js和css引入

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

2、html代码

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

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

3、js代码

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

 1  //上传图片控件
 2     var RoomPictureUtils = Window.RoomPictureUtils = {};
 3     (function (Util) {
 4         Util.init = function () {
 5             Util.initUE();
 6         };
 7 
 8         //上传控件初始化
 9         Util.initUE = function () {
10 
11             $("#dlgInfo").after("<div id=\"ueditorupload\"></div>");
12             UE.delEditor("ueditorupload");
13             Util.ue = UE.getEditor('ueditorupload', { autoHeightEnabled: false });
14             Util.ue.ready(function () {
15                 Util.ue.hide();
16             });
17 
18             //监听图片上传
19             Util.ue.addListener('beforeInsertImage', function (t, args) {
20                 Util.saveLP_Pictures(args);
21             });
22         }
23 
24         Util.uploadImgs = function (attType) {
25             $("#attType").val(attType.id);
26             var dlg = Util.ue.getDialog("insertimage");
27             dlg.open();
28         };
29 
30 
31         Util.saveLP_Pictures = function (args) {
32             //关闭图片上传插件
33             debugger;
34             var dlg = Util.ue.getDialog("insertimage");
35             dlg.close();
36             var id = $("#attType").val();
37             var count = args.length;
38             var picSrc = "";
39             if (count>0) {
40                 for (var i in args) {
41                     var obj = args[i];
42                     $("#Image").before('<img id="images' + (parseInt(i)) + '" src="' + obj.src + '"  class="images" style="height: 100px; width: 100px;padding:10px;" />');
43                     picSrc += obj.src + ",";
44                 }
45             }
46             picSrc = picSrc.substring(0, picSrc.length - 1);
47             $("#Attachments").val(picSrc);
48         };
49 
50         Util.deleteFY_RoomItemImg = function (pid, orderNo, event) {
51             if (!confirm("确定要删除吗?")) return;
52             var url = "/FY_RoomPictures/Delete";
53             var data = { "id": pid };
54             $.post(url, data, function (res) {
55                 var result;
56                 if (typeof res != "object")
57                     result = $.parseJSON(res);
58                 else {
59                     result = res;
60                 }
61                 if (result == null) {
62                     MSG.Error("程序异常错误");
63                     return;
64                 }
65                 if (result.ErrorCode != "00") {
66                     MSG.Error(result.ErrorMsg);
67                     return;
68                 }
69                 else {
70                     event = event ? event : window.event;
71                     var obj = event.srcElement ? event.srcElement : event.target;
72                     var $obj = $(obj);
73                     $obj.parent().parent().remove();
74                     MSG.Success("删除成功");
75                 }
76             });
77 
78         }
79 
80         Util.loadRoomItemPicture = function (orderNO) {
81             var roomNO = Util.getRoomNO();
82             if (!roomNO) {
83                 MSG.Error("房源的编号丢失，请刷新本页面从新加载");
84                 return;
85             }
86             var url = "/FY_RoomPictures/FY_RoomPicItem?roomNo=" + roomNO + "&orderNo=" + orderNO + "&_=" + (new Date()).valueOf();
87             $('#frmAjax #images' + orderNO + ' ul.filelist').load(url, null);
88         }
89 
90     })(RoomPictureUtils);