。
其实是KindEditor 里面带的一个插件,multiimage,实用方法也非常简单。
1。页面引用相应的样式表文件和js代码,中文语言包。
<link rel="stylesheet" type="text/css" href=" @Url.Content("~/Scripts/KindEditor/themes/default/default.css")" /> <script src="@Url.Content("~/Scripts/KindEditor/kindeditor.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/KindEditor/lang/zh_CN.js")" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function () { KindEditor.ready(function (K) { var editor = K.editor({ uploadJson: '/Upload/UploadImage?SaveUrl=3', // 这里是上传文件的方法。如果不是用mvc开发的,请更换成相应的方法。 allowFileManager: true }); K('#J_selectImage').click(function () { editor.loadPlugin('multiimage', function () { editor.plugin.multiImageDialog({ clickFn: function (urlList) { var div = K('#J_imageView'); div.html(''); var ccs = ''; K.each(urlList, function (i, data) { //div.append('<img src="' + data.url + '">'); ccs = ccs + data.url.substring(data.url.lastIndexOf("/") + 1) + ","; }); editor.hideDialog(); div.html("图片上传成功"); $("#imgmuttle").val(ccs);//这里得到的是图片名字的一组数组。[1.jpg,2.jpg......]并存放到<input type="hidden" id="imgmuttle" />中 } }); }); }); }); }); </script>
2.图片上传的方法。
[HttpPost] public ActionResult UploadImage(int SaveUrl =1) { //string kks = Request["category_id"]; string savePath = string.Empty; string saveUrl =string.Empty; switch (SaveUrl) { case 3: savePath = "/UpdateFiles/jingxs/"+DateTime.Now.ToString("yyyy-MM-dd")+"/"; saveUrl = "/UpdateFiles/" + DateTime.Now.ToString("yyyy-MM-dd") + "/"; break; default: savePath = "/UpdateFiles/"; saveUrl = "/UpdateFiles/"; break; } string fileTypes = "gif,jpg,jpeg,png,bmp"; int maxSize = 1000000; Hashtable hash = new Hashtable(); HttpPostedFileBase file = Request.Files["imgFile"]; if (file == null) { hash = new Hashtable(); hash["error"] = 0; hash["url"] = "请选择文件"; return Json(hash); } string dirPath = Server.MapPath(savePath); if (!Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); } string fileName = file.FileName; string fileExt = Path.GetExtension(fileName).ToLower(); ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(',')); if (file.InputStream == null || file.InputStream.Length > maxSize) { hash = new Hashtable(); hash["error"] = 0; hash["url"] = "上传文件大小超过限制"; return Json(hash); } if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1) { hash = new Hashtable(); hash["error"] = 0; hash["url"] = "上传文件扩展名是不允许的扩展名"; return Json(hash); } string fileUrl=""; if (SaveUrl == 0) { string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; string filePath = dirPath +"tmep/"+ newFileName; file.SaveAs(filePath); fileUrl = saveUrl + Command.command.addWaterMark(filePath, fileExt, dirPath); } else { string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; string filePath = dirPath + newFileName; file.SaveAs(filePath); fileUrl = saveUrl + newFileName; } hash = new Hashtable(); hash["error"] = 0; hash["url"] = fileUrl; return Json(hash, "text/html;charset=UTF-8"); ; }
这样就可以简单的实现了。本博客只注重功能的可用性。至于理论。以后会慢慢加深。