本文介绍如何改进在线编辑器图片上传功能，包括优化图片大小、删除未使用的图片及实现图片路径动态配置，提高用户体验并减少服务器资源消耗。
代码地址:http://download.youkuaiyun.com/detail/lploveme/3895031
因为项目需要需要重新找一个在线编辑器,在朋友的推荐下看了下 KindEditer For Asp.net的html在线编辑器 总体的感觉非常好,扩展的功能很多,最重要的是浏览器兼容性做的很好.
调用起来也是相当的方便.太多的优点,于是想将这个例子改成一个通用的用户控件能在项目中自己调用.
看了这个小例子的源码在上传图片的时候做的不是很到位.(就是一个简简单单的上传图片,将原图放到了服务器上) 个人认为这样肯定是不好的,太多的浪费了服务器的资源而且,用户
在浏览页面的时候因为图片过大不得不等待的情况会让人痛心疾首.再者没有对垃圾图片进行删除
修改上传图片成了修改KindEditer 首要任务.
要实现的目标:
一:上传图片判断图片大小和长宽 如果图片大小过大 将别决绝上传图片.如果上传图片长宽超过了一定的比例将原图按照比例缩小减少服务器和浏览器的压力
二:当用户选择提交的时候(也就相当于一篇文章点击发布的时候) 判断用户上传的这些图片是否全部都用到,如果没有用到将这些图片进行删除操作.减少服务器比不要的开支
三:做成灵活的不需要修改的用户控件 方便程序的使用
具体的做法如下:
为了程序的灵活 我在新建了一个Class-->Help 定义了如下的属性:
private static string _PicDirName;
/// <summary>
/// 保存图片的路径 /// 在考虑到很多程序的通用后 我发现在放图片的文件夹是不固定的,比如上传的图片有可能是用户一个GUID,而不是一个死的Img或者是PIC所以穿参数比较好
/// </summary>
public static string PicDirName
{
get { return _PicDirName; }
set { _PicDirName = value; }
}
private static string _PicPar;
/// <summary>
/// 保存图片用的是web.config中的那一个参数 为了写好了eidt而不改动,这里定义了一个参数标识一下该用web.config中的哪一个
/// </summary>
public static string PicPar
{
get { return _PicPar; }
set { _PicPar = value; }
}
private static string _ControlName;
/// <summary>
/// 这是控件的名称[备用,暂时不做解释]
/// </summary>
public static string ControlName
{
get { return _ControlName; }
set { _ControlName = value; }
}当然 为了方便调用上面的HelpClass 是静态的
web.config中配置了 上传图片的一个主路径:
<configuration>
<appSettings> <!--web.config 中配置上传路径-->
<add key="UpLoadPic" value="/images/"/>
</appSettings>
<connectionStrings/>这样就可以实现Web.Config 和编辑器联动而且不用每次都要修改编辑器的代码
如果了解编辑器的童鞋肯定知道:KindEditer上传图片的功能做的不是很好,或者说我看到for asp.net 的例子不是很好,所以要对图片上传做一些改动
具体的目标是:
1.删除用户删除的图片(用户在编辑器中已经上传的图片但后来因为各种原因被用户删除的图片)
2.图片大小做一个处理,对于过大的图片缩小图片
具体的代码是:
this.context = context;
//临时文件路径
string PicTemp = "MyPicTemp/";//临时文件放置的地方,方便删除文件用
//保存图片的规则..比如是公司的id
string PicDirName = Help.PicDirName;
//bool IsSmailPic = context.Request.QueryString["issmailpic"].ToString();//是否绘制小图片[]
//文件保存到什么地方 应该和配置文件有关系的,而不是简单的写死的.如果能在前台在进行配置就更好了
string picPar = Help.PicPar;
string picSavePath = ConfigurationManager.AppSettings[picPar];//这是配置文件中要求保存图片的地方
//定义允许上传的文件扩展名
Hashtable extTable = new Hashtable();
extTable.Add("image", "gif,jpg,jpeg,png,bmp");
extTable.Add("flash", "swf,flv");
extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
int maxSize = 1000000;//最大文件大小
HttpPostedFile imgFile = context.Request.Files["imgFile"];//得到上传文件对象
if (imgFile==null)//如果没有上传图片对象
{
showError("请选择上传图片");
}
//如果已经上传图片对象
String dirPath = context.Server.MapPath("~"+picSavePath);//查看路径是否存在
if (!Directory.Exists(dirPath))//上传路径是否存在
{
showError("上传目录不存在。");
}
string TempPath = context.Server.MapPath("~/edit/" + PicTemp);
if (!Directory.Exists(TempPath))
{
showError("临时文件目录不存在,请添加临时文件目录");
}
String dirName = context.Request.QueryString["dir"];
if (String.IsNullOrEmpty(dirName))
{
dirName = "image";
}
if (dirName!="image")//如果不是图片的话告诉用户这个功能暂时是不能使用的
{
showError("此功能暂时未开放!");
}
//判断类型是否包含
if (!extTable.ContainsKey(dirName))
{
showError("目录名不正确。");
}
String fileName = imgFile.FileName;
String fileExt = Path.GetExtension(fileName).ToLower();
if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
{
showError("上传文件大小超过限制。");
}
if ((imgFile.ContentLength>1024*1024)&&dirName=="image")//如果图片的大小超过了1mb 不能上传该图片
{
showError("上传图片不能大小不能超过1MB");
}
if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1)
{
showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。");
}
//创建文件夹-->保存文件的地方
dirPath += PicDirName + "/";
//saveUrl += PicDirName + "/";
//创建
if (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
}
String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", System.Globalization.DateTimeFormatInfo.InvariantInfo) + fileExt;
String filePath = dirPath + newFileName;
byte[] myData = new Byte[imgFile.ContentLength];
imgFile.InputStream.Read(myData, 0, imgFile.ContentLength);
string sFilename = System.IO.Path.GetFileName(imgFile.FileName);
try
{
//加载出原来的图片 也就是临时文件夹中的图片
System.Drawing.Image newImg;
using (System.Drawing.Image image = System.Drawing.Image.FromStream(imgFile.InputStream))
{
int SourceWidth = image.Width;//原来的图片的宽
int SourceHight = image.Height;//原来图片的长度
int NewWidth = SourceWidth;
int NewHight = SourceHight;
//判断图片大小 如果超过了大小限制将原图缩小到
if (SourceWidth > 600)//宽度>600 限定成600的等比例图片
{
NewWidth = 600;
NewHight = (600 * SourceHight) / SourceWidth;
}
else if (SourceWidth > 600)//长度大于600的话 处理图片
{
NewHight = 600;
NewWidth = (600 * SourceWidth) / SourceHight;
}
//开始画新的图片
newImg = new Bitmap(image, NewWidth, NewHight);
newImg.Save(context.Server.MapPath("/edit/" + PicTemp + newFileName), System.Drawing.Imaging.ImageFormat.Jpeg);
}
Hashtable hash = new Hashtable();
hash["error"] = 0;
hash["url"] = "/edit/" + PicTemp + newFileName;
//如果上传图片成功了,下面的就是将图片路径回传到前面
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
context.Response.Write(LitJson.JsonMapper.ToJson(hash));
context.Response.End();
}
catch(Exception e)
{
//showError(e.Message);
}
//处理图片大小
}
public bool IsReusable {
get {
return false;
}
}
/// <summary>
/// 如果上传过程中遇到错误
/// </summary>
/// <param name="message"></param>
private void showError(string message)
{
Hashtable hash = new Hashtable();
hash["error"] = 1;
hash["message"] = message;
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
context.Response.Write(LitJson.JsonMapper.ToJson(hash));
context.Response.End();
}这里可以看到上传的过程中有两个路径:临时文件的路径 一个是正式的放置路径 那也许你会问 在最后save图片的时候是放到临时文件中的 为什么要把正式的文件路径放到这里呢? 答案是:将正式要上传的图片路径在上传过程中一道进行判断和添加目录,免得以后做出了显得麻烦这里的图片规定的是不能超过600px的长和宽 超过了就就行缩小,这样可以达到对图片大小的一个控制 最后的图片保存的是jpg的格式,通过测试一般来说jpg格式的图片是会比同类型的图片小的.为了服务器资源.注意这里图片save地址是临时文件的地址,这是因为用户上传的图片在没点击发布或者是完成前都是有可能会改动的,所以不急着将图片上传到正式文件中.下面的操作就是 当用户点击发布的时候将用户用到的图片保存到正式文件中去代码是: /// <summary>
/// 这个方法或者是事件 将在最后执行---> 用处是删除上传了没用的图片保留下有用的图片
/// </summary>
/// <returns></returns>
public string GetControlValue()
{
string Content = this.content1.Value;//得到控件中的信息
try
{
string PicDirName = Help.PicDirName;
string picPar = Help.PicPar;
string picSavePath = ConfigurationManager.AppSettings[picPar];
//src="/images/zhangsan/20111207134335_4531.jpg"
MatchCollection mc = Regex.Matches(Content, "/edit/MyPicTemp/[0-9,_]{1,}.jpg", RegexOptions.IgnoreCase);//将全部的图片找出来
//下面就是一个一个的去匹配修改
for (int i = 0; i < mc.Count; i++)
{
//代替原来的临时文件夹
string[] ImgSz = mc[i].Value.Split('/');
string ImgName = "";
if (ImgSz.Length == 4)
{
ImgName = ImgSz[3];//图片的名称
}//将临时文件代替成想要上传的文件
Content = Content.Replace(mc[i].Value, picSavePath + PicDirName + ImgName);
//将临时文件夹中的这个图片转移到正式文件夹中
string oldPicPath = Server.MapPath(mc[i].Value);
string newPicPath = Server.MapPath(picSavePath + PicDirName + ImgName);
File.Copy(oldPicPath, newPicPath, true);//copy的方法
}//for-end
//delete 文件夹中全部文件
//删除文件夹中的图片
System.IO.DirectoryInfo path = new System.IO.DirectoryInfo(Server.MapPath("~/edit/MyPicTemp/"));
deletefile(path);
this.content1.Value = Content;
}
catch
{
}
return Content;
}
/// <summary>
/// 这是删除图片的具体的方法
/// </summary>
/// <param name="path"></param>
private void deletefile(System.IO.DirectoryInfo path)
{
foreach (System.IO.DirectoryInfo d in path.GetDirectories())
{
deletefile(d);
}
foreach (System.IO.FileInfo f in path.GetFiles())
{
f.Delete();
}
}这里用正则表达式将用户发布的信息图片找出来并且Copy 到正式文件中,并且在for 结束的时候将临时文件清空这样 用户上传了但是没有用到的图片都将被删除掉.服务器资源得到一个有效的应用.代码将上传到down.csdn 上去.地址我会尽快贴到文章末尾代码地址:http://download.youkuaiyun.com/detail/lploveme/3895031
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
