因工作需要，上传图片要增加MIME类型验证和生成较小尺寸的图片用于浏览。根据网上代码加以修改做出如下效果图：
前台代码如下：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>上传图片和生成缩略图以及图片预览</title> 5 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 7 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 8 </head> 9 <body> 10 <form id="form1" runat="server"> 11 <table> 12 <tr> 13 <td>图片上传： 14 </td> 15 <td> 16 <input type="text" id="txtImgPath" class="easyui-textbox" runat="server" style=" 235px;" /> 17 <input type="button" id="btnPCImg" value="浏览..." onclick="showFileUp('FileUpload1')" 18 class="easyui-linkbutton btn" style=" 106px;" /> 19 <asp:FileUpload class="easyui-linkbutton btn" Style="display: none" ID="FileUpload1" 20 runat="server" onchange="apendtoText('txtImgPath',this)" /> 21 <asp:Button class="easyui-linkbutton btn" ID="btnUpFile" runat="server" Text="上传图片" 22 OnClick="btnUpFile_OnClick" Width="106px" /> 23 </td> 24 </tr> 25 <tr> 26 <td>图片预览： 27 </td> 28 <td> 29 <asp:Image ID="Image1" runat="server" /> 30 <asp:TextBox ID="txtimg" Style="display: none;" runat="server" Height="20px"></asp:TextBox> 31 <asp:TextBox ID="oldimgpath" Style="display: none;" runat="server" Height="20px"></asp:TextBox> 32 </td> 33 </tr> 34 </table> 35 </form> 36 </body> 37 <script type="text/javascript"> 38 /* 39 * 显示文件选择框 40 * id {String} 要显示的FileUp 41 */ 42 function showFileUp(id) { 43 $('#' + id).click(); 44 } 45 /* 46 * FileUp控件值改变后将该控件的值赋给其他控件 47 * id {String} 接收值的控件ID 48 * obj {Object} FileUp控件 49 */ 50 function apendtoText(id, obj) { 51 $('#' + id).textbox('setText', $(obj).val()); 52 } 53 </script> 54 </html>
后台代码如下：
1 /// <summary> 2 /// 上传图片 3 /// </summary> 4 /// <param name="sender"></param> 5 /// <param name="e"></param> 6 protected void btnUpFile_OnClick(object sender, EventArgs e) 7 { 8 if (FileUpload1.PostedFile.FileName != "") 9 { 10 if (FileUpload1.PostedFile.ContentLength <= 2048000)//只能上传小于或等于2MB的图片 11 { 12 FileExtension[] fe = { FileExtension.Gif, FileExtension.Jpg, FileExtension.Png };//允许的图片格式 13 if (FileValidation.IsAllowedExtension(FileUpload1, fe)) 14 { 15 //} 16 //if (newFileExtensions == ".jpg" || newFileExtensions == ".gif" || newFileExtensions == ".bmp" || newFileExtensions == ".png")//直接使用文件后缀检查是否为允许类型 17 //{ 18 string sfilename = FileUpload1.PostedFile.FileName; 19 int sfilenamehz = sfilename.LastIndexOf(".", StringComparison.Ordinal); 20 string newFileExtensions = sfilename.Substring(sfilenamehz).ToLower(); 21 string pa = "uploadfiles/" + DateTime.Now.Year + "-" + DateTime.Now.Month + "/";//获取当前年份和月份作为文件夹名 22 if (!Directory.Exists("~/" + pa))//如不存在则创建文件夹 23 { 24 Directory.CreateDirectory(Server.MapPath("~/" + pa)); 25 } 26 string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss"); 27 string uppath = "~/" + pa + newFileName + newFileExtensions; 28 29 Stream oStream = FileUpload1.PostedFile.InputStream; 30 System.Drawing.Image oImage = System.Drawing.Image.FromStream(oStream); 31 32 int oWidth = oImage.Width; //原图宽度 33 int oHeight = oImage.Height; //原图高度 34 int tWidth = 200; //设置缩略图初始宽度 35 int tHeight = 200; //设置缩略图初始高度 36 37 //按比例计算出缩略图的宽度和高度 38 if (oWidth >= oHeight) 39 { 40 tHeight = (int)Math.Floor(Convert.ToDouble(oHeight) * (Convert.ToDouble(tWidth) / Convert.ToDouble(oWidth))); 41 } 42 else 43 { 44 tWidth = (int)Math.Floor(Convert.ToDouble(oWidth) * (Convert.ToDouble(tHeight) / Convert.ToDouble(oHeight))); 45 } 46 47 //生成缩略原图 48 Bitmap tImage = new Bitmap(tWidth, tHeight); 49 Graphics g = Graphics.FromImage(tImage); 50 g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; //设置高质量插值法 51 g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;//设置高质量,低速度呈现平滑程度 52 g.Clear(Color.Transparent); //清空画布并以透明背景色填充 53 g.DrawImage(oImage, new Rectangle(0, 0, tWidth, tHeight), new Rectangle(0, 0, oWidth, oHeight), GraphicsUnit.Pixel); 54 55 string upfilepath2 = "~/" + pa + newFileName + "_m" + newFileExtensions; //缩略图为原图后缀增加_m用于区分 56 string oFullName = Server.MapPath(uppath); 57 string tFullName = Server.MapPath(upfilepath2); 58 59 try 60 { 61 //保存图片 62 oImage.Save(oFullName); 63 tImage.Save(tFullName); 64 Image1.ImageUrl = upfilepath2;//将缩略图显示到前台Img控件 65 txtimg.Text = pa + newFileName + "_m" + newFileExtensions;//将文件地址赋予控件用于保存 66 } 67 catch (Exception ex) 68 { 69 throw new Exception("发生错误，保存失败！", ex); 70 } 71 finally 72 { 73 //释放资源 74 oImage.Dispose(); 75 g.Dispose(); 76 tImage.Dispose(); 77 } 78 } 79 else 80 { 81 string fileType = string.Empty; 82 foreach (var fileExtension in fe) 83 { 84 if (!string.IsNullOrEmpty(fileType)) 85 { 86 fileType += ","; 87 } 88 fileType += fileExtension; 89 } 90 Response.Write("<script>alert('文件格式被禁止，只支持" + fileType + "格式的图片')</script>"); 91 } 92 } 93 else 94 { 95 Response.Write("<script>alert('文件大了，请修改大小，勿超过2MB')</script>"); 96 } 97 } 98 } 99 enum FileExtension 100 { 101 Jpg = 255216, 102 Gif = 7173, 103 Png = 13780 104 } 105 /// <summary> 106 /// 判断上传的文件的真实格式 107 /// </summary> 108 private class FileValidation 109 { 110 /// <summary> 111 /// 检查是否为允许的图片格式 112 /// </summary> 113 /// <param name="fu">上传控件</param> 114 /// <param name="fileEx">文件扩展名</param> 115 /// <returns></returns> 116 public static bool IsAllowedExtension(FileUpload fu, FileExtension[] fileEx) 117 { 118 int fileLen = fu.PostedFile.ContentLength; 119 byte[] imgArray = new byte[fileLen]; 120 fu.PostedFile.InputStream.Read(imgArray, 0, fileLen); 121 MemoryStream ms = new MemoryStream(imgArray); 122 BinaryReader br = new BinaryReader(ms); 123 string fileclass = string.Empty; 124 try 125 { 126 byte buffer = br.ReadByte(); 127 fileclass = buffer.ToString(); 128 buffer = br.ReadByte(); 129 fileclass += buffer.ToString(); 130 } 131 catch //(Exception ex) 132 { 133 // ignored 134 } 135 br.Close(); 136 ms.Close(); 137 int num = 0; 138 int.TryParse(fileclass, out num); 139 foreach (FileExtension fe in fileEx) 140 { 141 if (num == (int)fe) 142 return true; 143 } 144 return false; 145 } 146 }