。
其实是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"); ;
}
这样就可以简单的实现了。本博客只注重功能的可用性。至于理论。以后会慢慢加深。