文件上傳三：base64編碼上傳
阿新 • • 發佈：2017-06-10
說了 json datetime byte 調試 handle png mage hang
介紹三種上傳方式：
文件上傳一：偽刷新上傳
文件上傳二：FormData上傳
文件上傳三：base64編碼上傳
Flash的方式也玩過，不喜歡不拿來說了。
優點：
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 }
文件上傳三：base64編碼上傳