首先需要引用 js 和css
1 2 3 4
img_list.js 如下：
1 /// 2 //显示 3 function imgshow(obj) { 4 //$(obj).find(a).show(); 5 } 6 7 //隐藏 8 function imghide(obj) { 9 //$(obj).find(a).hide();10 }11 12 //上传13 function upload() { 14 $(#fileload).click();15 }16 17 //删除18 function imgdel(listid, fileid, hfid) {19 20 $.post(/commonmodule/ashx/public.ashx?action=delmessageimg&files= + $(# + hfid).val(), function (result) {21 if (result != ok)22 $.messager.alert(消息提示, 删除失败!);23 });24 var html = 25 $(#+listid).html(html);26 }27 28 //添加成功29 function imgaddhtml(data, code,listid,fileid,hfid) {30 var list = data.split(',');31 var html = ;32 html += ;33 $(# + listid).html(html);34 }35 36 //图片文件上传37 //uppath 上传空间id 38 //上传成功存放的图片路径的隐藏域id39 //listid 显示图片的区域id40 function imgupload(uppath, hndimg,listid) {41 var sendurl = /commonmodule/ashx/upload_ajax.ashx?action=singlefile&isthumbnail=1&upfilepath= + uppath;42 //开始提交43 $(#form1).ajaxsubmit({44 beforesubmit: function (formdata, jqform, options) {45 //alert(1);46 },47 success: function (data, textstatus) {48 var list = $(# + hndimg).val();49 $(# + hndimg).val(data.msgbox);50 imgaddhtml(data.msgbox, 0,listid,uppath,hndimg);51 },52 error: function (data, status, e) {53 alert(上传失败！);54 },55 url: sendurl,56 type: post,57 datatype: json,58 timeout: 60000059 });60 };
img_list.css 如下：
1 .img_list{ margin:0px; padding:0px; overflow:hidden;}2 .img_list ul,.img_list ul li{ margin:0px; padding:0px;} 3 .img_list ul li{ float:left; list-style:none; position:relative; margin:5px 0px 0px 5px;}4 .img_list ul li span5 { position:absolute;top:3px; right:3px; width: 16px; height: 16px; opacity: 0.6;filter: alpha(opacity=60); margin: 0 0 0 2px;6 vertical-align: top; background: url('/themes/images/panel_tools.png') no-repeat -16px 0px;}7 .img_list ul li img{ width:80px; height:80px; cursor:pointer; position:relative; z-index:0;}8 .img_list ul li .input{ width:80px; height:80px; cursor:pointer; position:relative; left:-100px;vertical-align: top; margin:0px; padding:0px; opacity:0;filter: alpha(opacity=0); }
panel_tools.png 如下：
jia.jpg 如下：
以上素材引用完成后 再看 前台页面代码：
1 2 图片1： 3 4 5 6 建议尺寸(243*150) 7 8
9 10 11 图片2：12 13 14 15 16 建议尺寸(243*150)17 18

后台页面代码 （初始化控件） ：
1 protected void page_load(object sender, eventargs e) 2 { 3 4 if (!ispostback) 5 { 6 ltrimg_list.text = upload.showuploadfile(file1, imgpath, mfmodel.imgpath, img_list1); 7 literal1.text = upload.showuploadfile(file2, hkimgpath, mfmodel.hkimgpath, img_list2); 8 9 }10 }
生成上传控件方法
1 /// 2 /// 生成一个上传插件信息 3 /// 4 /// 上传控件id 5 /// 隐藏域id用来保存上传的图片路径 6 /// 初始化显示的图片地址 7 /// 上传成功之后用来显示上传图片的标签id 8 /// 9 public static string showuploadfile(string fileid, string hfid, string imgurl, string listid)10 {11 string result = ;12 if (!string.isnullorempty(imgurl))13 {14 result =
;15 }16 else17 {18 result =
;19 }20 21 return result;22 }
上传文件的方法ashx:
1 using system; 2 using system.collections; 3 using system.collections.generic; 4 using system.io; 5 using system.linq; 6 using system.text.regularexpressions; 7 using system.web; 8 using dotnet.kernel.common; 9 using dotnet.utilities; 10 using litjson; 11 12 namespace bpms.web.admin.ashx 13 { 14 /// 15 /// upload_ajax 的摘要说明 16 /// 17 public class upload_ajax : ihttphandler 18 { 19 20 public void processrequest(httpcontext context) 21 { 22 //取得处事类型 23 string action = context.request.querystring[action]; 24 25 switch (action) 26 { 27 case singlefile: //单文件 28 singlefile(context); 29 break; 30 case multiplefile: //多文件 31 multiplefile(context); 32 break; 33 case attachfile: //附件 34 attachfile(context); 35 break; 36 case editorfile: //编辑器文件 37 editorfile(context); 38 break; 39 40 } 41 } 42 43 44 45 #region 上传单文件处理=================================== 46 private void singlefile(httpcontext context) 47 { 48 49 string _refilepath = context.request.querystring[refilepath]; //取得返回的对象名称 50 string _upfilepath = context.request.querystring[upfilepath]; //取得上传的对象名称 51 string _delfile = context.request.querystring[_refilepath]; 52 httppostedfile _upfile = null; 53 try 54 { 55 _upfile = context.request.files[_upfilepath]; 56 } 57 catch (exception e) 58 { 59 context.response.write({\msg\: \0\, \msgbox\: \上传文件过大！\}); 60 context.response.end(); 61 } 62 bool _iswater = false; //默认不打水印 63 bool _isthumbnail = false; //默认不生成缩略图 64 bool _isimage = false; 65 66 if (context.request.querystring[iswater] == 1) 67 _iswater = true; 68 if (context.request.querystring[isthumbnail] == 1) 69 _isthumbnail = true; 70 if (context.request.querystring[isimage] == 1) 71 _isimage = true; 72 73 if (_upfile == null) 74 { 75 context.response.write({\msg\: \0\, \msgbox\: \请选择要上传文件！\}); 76 return; 77 } 78 upload upfiles = new upload(); 79 string msg = upfiles.filesaveas(_upfile, _isthumbnail, _iswater, _isimage); 80 //删除已存在的旧文件 81 utils.deleteupfile(_delfile); 82 //返回成功信息 83 context.response.write(msg); 84 85 context.response.end(); 86 } 87 #endregion 88 89 #region 上传多文件处理=================================== 90 private void multiplefile(httpcontext context) 91 { 92 string _upfilepath = context.request.querystring[upfilepath]; //取得上传的对象名称 93 httppostedfile _upfile = context.request.files[_upfilepath]; 94 bool _iswater = false; //默认不打水印 95 bool _isthumbnail = false; //默认不生成缩略图 96 97 if (context.request.querystring[iswater] == 1) 98 _iswater = true; 99 if (context.request.querystring[isthumbnail] == 1)100 _isthumbnail = true;101 102 if (_upfile == null)103 {104 context.response.write({\msg\: \0\, \msgbox\: \请选择要上传文件！\});105 return;106 }107 upload upfiles = new upload();108 string msg = upfiles.filesaveas(_upfile, _isthumbnail, _iswater);109 //返回成功信息110 context.response.write(msg);111 context.response.end();112 }113 #endregion114 115 #region 上传附件处理=====================================116 private void attachfile(httpcontext context)117 {118 string _upfilepath = context.request.querystring[upfilepath]; //取得上传的对象名称119 httppostedfile _upfile = context.request.files[_upfilepath];120 bool _iswater = false; //默认不打水印121 bool _isthumbnail = false; //默认不生成缩略图122 123 if (_upfile == null)124 {125 context.response.write({\msg\: \0\, \msgbox\: \请选择要上传文件！\});126 return;127 }128 upload upfiles = new upload();129 string msg = upfiles.filesaveas(_upfile, _isthumbnail, _iswater, false, true);130 //返回成功信息131 context.response.write(msg);132 context.response.end();133 }134 #endregion135 136 #region 编辑器上传处理===================================137 private void editorfile(httpcontext context)138 {139 bool _iswater = false; //默认不打水印140 if (context.request.querystring[iswater] == 1)141 _iswater = true;142 httppostedfile imgfile = context.request.files[imgfile];143 if (imgfile == null)144 {145 showerror(context, 请选择要上传文件！);146 return;147 }148 upload upfiles = new upload();149 string remsg = upfiles.filesaveas(imgfile, false, _iswater);150 //string pattern = @^{\s*msg:\s*(.*)\s*,\s*msgbox:\s*\(.*)\\s*}$; //键名前和键值前后都允许出现空白字符151 string pattern = @^{\s*\msg\:\s*\(.*)\\s*,\s*\msgbox\:\s*\(.*)\\s*}$; //键名前和键值前后都允许出现空白字符152 regex r = new regex(pattern, regexoptions.ignorecase); //正则表达式实例，不区分大小写153 match m = r.match(remsg); //搜索匹配项154 string msg = m.groups[1].value; //msg的值，正则表达式中第1个圆括号捕获的值155 string msgbox = m.groups[2].value; //msgbox的值，正则表达式中第2个圆括号捕获的值 156 if (msg == 0)157 {158 showerror(context, msgbox);159 return;160 }161 hashtable hash = new hashtable();162 hash[error] = 0;163 hash[url] = msgbox;164 context.response.addheader(content-type, text/html; charset=utf-8);165 166 string result = jsonmapper.tojson(hash);167 //result = result.replace([,);168 //result = result.replace(], );169 context.response.write(result);170 171 context.response.end();172 173 }174 //显示错误175 private void showerror(httpcontext context, string message)176 {177 hashtable hash = new hashtable();178 hash[error] = 1;179 hash[message] = message;180 context.response.addheader(content-type, text/html; charset=utf-8);181 context.response.write(jsonmapper.tojson(hash));182 context.response.end();183 }184 #endregion185 186 187 188 #region helper189 public class namesorter : icomparer190 {191 public int compare(object x, object y)192 {193 if (x == null && y == null)194 {195 return 0;196 }197 if (x == null)198 {199 return -1;200 }201 if (y == null)202 {203 return 1;204 }205 fileinfo xinfo = new fileinfo(x.tostring());206 fileinfo yinfo = new fileinfo(y.tostring());207 208 return xinfo.fullname.compareto(yinfo.fullname);209 }210 }211 212 public class sizesorter : icomparer213 {214 public int compare(object x, object y)215 {216 if (x == null && y == null)217 {218 return 0;219 }220 if (x == null)221 {222 return -1;223 }224 if (y == null)225 {226 return 1;227 }228 fileinfo xinfo = new fileinfo(x.tostring());229 fileinfo yinfo = new fileinfo(y.tostring());230 231 return xinfo.length.compareto(yinfo.length);232 }233 }234 235 public class typesorter : icomparer236 {237 public int compare(object x, object y)238 {239 if (x == null && y == null)240 {241 return 0;242 }243 if (x == null)244 {245 return -1;246 }247 if (y == null)248 {249 return 1;250 }251 fileinfo xinfo = new fileinfo(x.tostring());252 fileinfo yinfo = new fileinfo(y.tostring());253 254 return xinfo.extension.compareto(yinfo.extension);255 }256 }257 258 #endregion259 260 public bool isreusable261 {262 get263 {264 return false;265 }266 }267 }268 }
1 using system; 2 using system.collections; 3 using system.collections.generic; 4 using system.io; 5 using system.linq; 6 using system.web; 7 using dotnet.kernel.common; 8 9 namespace bpms.web 10 { 11 public class upload 12 { 13 public upload() 14 { 15 16 } 17 /// 18 /// 生成一个上传插件信息 19 /// 20 /// 上传控件id 21 /// 隐藏域id用来保存上传的图片路径 22 /// 初始化显示的图片地址 23 /// 上传成功之后用来显示上传图片的标签id 24 /// 25 public static string showuploadfile(string fileid, string hfid, string imgurl, string listid) 26 { 27 string result = ; 28 if (!string.isnullorempty(imgurl)) 29 { 30 result =
; 31 } 32 else 33 { 34 result =
; 35 } 36 37 return result; 38 } 39 #region 40 /// 41 /// 裁剪图片并保存 42 /// 43 public bool cropsaveas(string filename, string newfilename, int maxwidth, int maxheight, int cropwidth, int cropheight, int x, int y) 44 { 45 string fileext = utils.getfileext(filename); //文件扩展名，不含“.” 46 if (!isimage(fileext)) 47 { 48 return false; 49 } 50 string newfiledir = utils.getmappath(newfilename.substring(0, newfilename.lastindexof(@/) + 1)); 51 //检查是否有该路径，没有则创建 52 if (!directory.exists(newfiledir)) 53 { 54 directory.createdirectory(newfiledir); 55 } 56 try 57 { 58 string filefullpath = utils.getmappath(filename); 59 string tofilefullpath = utils.getmappath(newfilename); 60 return thumbnail.makethumbnailimage(filefullpath, tofilefullpath, 180, 180, cropwidth, cropheight, x, y); 61 } 62 catch 63 { 64 return false; 65 } 66 } 67 68 /// 69 /// 文件上传方法a 70 /// 71 /// 文件流 72 /// 是否生成缩略图 73 /// 是否打水印 74 /// 服务器文件路径 75 public string filesaveas(httppostedfile postedfile, bool isthumbnail, bool iswater) 76 { 77 return filesaveas(postedfile, isthumbnail, iswater, false, false); 78 } 79 80 /// 81 /// 文件上传方法b 82 /// 83 /// 文件流 84 /// 是否生成缩略图 85 /// 是否打水印 86 /// 是否必须上传图片 87 /// 服务器文件路径 88 public string filesaveas(httppostedfile postedfile, bool isthumbnail, bool iswater, bool _isimage) 89 { 90 return filesaveas(postedfile, isthumbnail, iswater, _isimage, false); 91 } 92 93 /// 94 /// 文件上传方法c 95 /// 96 /// 文件流 97 /// 是否生成缩略图 98 /// 是否打水印 99 /// 是否返回文件原名称100 /// 服务器文件路径101 public string filesaveas(httppostedfile postedfile, bool isthumbnail, bool iswater, bool _isimage, bool _isreoriginal)102 {103 try104 {105 string fileext = utils.getfileext(postedfile.filename); //文件扩展名，不含“.”106 string originalfilename = postedfile.filename.substring(postedfile.filename.lastindexof(@\) + 1); //取得文件原名107 string filename = utils.getramcode() + . + fileext; //随机文件名108 string dirpath = getuploadpath(); //上传目录相对路径109 110 //检查文件扩展名是否合法111 if (!checkfileext(fileext))112 {113 return {\msg\: \0\, \msgbox\: \不允许上传 + fileext + 类型的文件！\};114 }115 //检查是否必须上传图片116 if (_isimage && !isimage(fileext))117 {118 return {\msg\: \0\, \msgbox\: \对不起，仅允许上传图片文件！\};119 }120 //检查文件大小是否合法121 if (!checkfilesize(fileext, postedfile.contentlength))122 {123 return {\msg\: \0\, \msgbox\: \文件超过限制的大小啦！\};124 }125 //获得要保存的文件路径126 string serverfilename = dirpath + filename;127 string serverthumbnailfilename = dirpath + small_ + filename;128 string returnfilename = serverfilename;129 //物理完整路径 130 string tofilefullpath = utils.getmappath(dirpath);131 //检查有该路径是否就创建132 if (!directory.exists(tofilefullpath))133 {134 directory.createdirectory(tofilefullpath);135 }136 //保存文件137 postedfile.saveas(tofilefullpath + filename);138 //如果是图片，检查图片尺寸是否超出限制139 if (isimage(fileext))140 {141 thumbnail.makethumbnailimage(tofilefullpath + filename, tofilefullpath + filename, 3000, 3000);142 }143 //是否生成缩略图144 if (isimage(fileext) && isthumbnail)145 {146 thumbnail.makethumbnailimage(tofilefullpath + filename, tofilefullpath + small_ + filename, 150, 150, r);147 // returnfilename += , + serverthumbnailfilename; //返回缩略图，以逗号分隔开148 }149 //是否打图片水印150 if (iswatermark(fileext) && iswater)151 {152 //switch (this.siteconfig.watermarktype)153 //{154 // case 1:155 // watermark.addimagesigntext(serverfilename, serverfilename,156 // this.siteconfig.watermarktext, this.siteconfig.watermarkposition,157 // this.siteconfig.watermarkimgquality, this.siteconfig.watermarkfont, this.siteconfig.watermarkfontsize);158 // break;159 // case 2:160 // watermark.addimagesignpic(serverfilename, serverfilename,161 // this.siteconfig.watermarkpic, this.siteconfig.watermarkposition,162 // this.siteconfig.watermarkimgquality, this.siteconfig.watermarktransparency);163 // break;164 //}165 }166 //如果需要返回原文件名167 if (_isreoriginal)168 {169 return {\msg\: \1\, \msgbox\: \ + serverfilename + \, mstitle: \ + originalfilename + \};170 }171 return {\msg\: \1\, \msgbox\: \ + returnfilename + \};172 }173 catch174 {175 return {\msg\: \0\, \msgbox\: \上传过程中发生意外错误！\};176 }177 }178 179 180 #region 私有方法181 182 /// 183 /// 返回上传目录相对路径184 /// 185 /// 上传文件名186 private string getuploadpath()187 {188 //string path = /files/upload/; //站点目录+上传目录189 string path = /upload/; //站点目录+上传目录190 path += datetime.now.tostring(yyyymm) + / + datetime.now.tostring(dd);191 return path + /;192 }193 194 /// 195 /// 是否需要打水印196 /// 197 /// 文件扩展名，不含“.”198 private bool iswatermark(string _fileext)199 {200 //判断是否开启水印201 if (1 == 1)202 {203 //判断是否可以打水印的图片类型204 arraylist al = new arraylist();205 al.add(bmp);206 al.add(jpeg);207 al.add(jpg);208 al.add(png);209 if (al.contains(_fileext.tolower()))210 {211 return true;212 }213 }214 return false;215 }216 217 /// 218 /// 是否为图片文件219 /// 220 /// 文件扩展名，不含“.”221 private bool isimage(string _fileext)222 {223 arraylist al = new arraylist();224 al.add(bmp);225 al.add(jpeg);226 al.add(jpg);227 al.add(gif);228 al.add(png);229 if (al.contains(_fileext.tolower()))230 {231 return true;232 }233 return false;234 }235 236 /// 237 /// 检查是否为合法的上传文件238 /// 239 private bool checkfileext(string _fileext)240 {241 //检查危险文件242 string[] excext = { asp, aspx, php, jsp, htm, html };243 for (int i = 0; i 10000 * 10240)280 {281 return false;282 }283 }284 return true;285 }286 287 #endregion288 289 #endregion290 }291 }