介绍三种上传方式：
优点：
1.浏览器可以马上展示图像，不需要先上传到服务端，减少服务端的垃圾图像
2.前端可以压缩、处理后上传到服务端，减少传输过程中的等待时间和服务器压力
缺点：
1.生成编码后保存成图片，倘若不做处理，会比原来的图片容量大，具体原因，搜索关键词：Base64编码为什么会使数据量变大
2.图片越大生成的编码越多，编码越多开发者工具中查看它时卡顿越久，谷歌浏览器好点，360极速直接假死。也就是说会影响前端调试。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style> 7 td { 8 padding: 10px; 9 } 10 </style> 11 </head> 12 <body> 13 14 <table> 15 <tr> 16 <td>选择图片：</td> 17 <td><input type="file" id="file1" /></td> 18 </tr> 19 <tr> 20 <td>原图预览：</td> 21 <td id="ytyl"></td> 22 </tr> 23 <tr> 24 <td></td> 25 <td><input type="button" value="压缩" id="btnYaSuo" /></td> 26 </tr> 27 <tr> 28 <td>压缩预览：</td> 29 <td id="ysyl"></td> 30 </tr> 31 <tr> 32 <td></td> 33 <td><input type="button" value="上传" id="btnUpload" /></td> 34 </tr> 35 </table> 36 37 <canvas id="myCanvas" style="display:none"> 38 Your browser does not support the HTML5 canvas tag. 39 </canvas> 40 41 <script> 42 43 file1.onchange = function () { 44 if (file1.files.length < 1 || !/image/w+/.test(file1.files[0].type)) { 45 //判断格式正则：/image/png/，/image/jpeg/，/image/gif/ 46 alert("请确保文件为图像类型"); 47 return; 48 } 49 var reader = new FileReader(); 50 reader.readAsDataURL(file1.files[0]); 51 reader.onload = function (e) { 52 var result = e.target.result; 53 if (result && result.length > 0) { 54 ytyl.innerHTML = '<img src="' + result + '" id="img1" />'; 55 } 56 }; 57 }; 58 59 btnYaSuo.onclick = function () { 60 var imgobj = document.getElementById("img1"); 61 var canvas = document.getElementById("myCanvas"); 62 canvas.width = imgobj.width; 63 canvas.height = imgobj.height; 64 var context = canvas.getContext("2d"); 65 context.drawImage(imgobj, 0, 0, canvas.width, canvas.height); 66 //取值：image/jpeg、image/png（默认值） 67 var dataUrl = canvas.toDataURL("image/jpeg", 0.9); 68 ysyl.innerHTML = '<img src="' + dataUrl + '" id="img2" />'; 69 }; 70 71 btnUpload.onclick = function () { 72 //var imgobj = document.getElementById("img1"); //未压缩的图像 73 var imgobj = document.getElementById("img2"); 74 if (!imgobj) { 75 return; 76 } 77 //做为普通的字符串POST到服务端 78 var data = { "FileData": imgobj.getAttribute("src") }; 79 //$.post("Handler1.ashx", data, function (res) { }, "json"); 80 }; 81 82 </script> 83 84 </body> 85 </html>
Handler1.ashx的处理：
1 public void ProcessRequest(HttpContext context) 2 { 3 string base64Code = context.Request.Form["FileData"]; 4 if (string.IsNullOrEmpty(base64Code)) 5 { 6 context.Response.Write("{"Msg":"请上传文件！"}"); 7 context.Response.End(); 8 } 9 10 string ext = string.Empty; 11 if (base64Code.Contains("data:image/jpeg;base64,")) 12 { 13 ext = ".jpg"; 14 base64Code = base64Code.Substring(23); 15 } 16 else if (base64Code.Contains("data:image/png;base64,")) 17 { 18 ext = ".png"; 19 base64Code = base64Code.Substring(22); 20 } 21 else 22 { 23 context.Response.Write("{"Msg":"文件格式只支持JPG、PNG！"}"); 24 context.Response.End(); 25 } 26 27 DateTime now = DateTime.Now; 28 string fileName = Guid.NewGuid().ToString() + ext; 29 string relPath = string.Format("/Upload/{0}{1}{2}/", now.Year.ToString(), now.Month.ToString(), now.Day.ToString()); 30 string absPath = HttpContext.Current.Request.MapPath("~" + relPath); 31 if (!Directory.Exists(absPath)) 32 { 33 Directory.CreateDirectory(absPath); 34 } 35 byte[] arr = Convert.FromBase64String(base64Code); 36 MemoryStream ms = new MemoryStream(arr); 37 new Bitmap(ms).Save(absPath + fileName); 38 39 context.Response.Write("{"Msg":"上传成功！","Path":"" + relPath + fileName + ""}"); 40 context.Response.End(); 41 }