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代码
首先我们需要创建一个div作为上传弹窗，也可以创建一个input来存放得到的上传的图片路径值
1 <div id="dlgInfo"></div>
2 <input />
1 <div style="100%;height:240px;"> 2 <img id="Image" src="~/images/upload3.jpg" onclick="RoomPictureUtils.uploadImgs(this)" style=" 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 >); 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 >); 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);