文件上传三：base64编码上传

介绍三种上传方式：

文件上传一：伪刷新上传

文件上传二：FormData上传

文件上传三：base64编码上传

优点：

1.浏览器可以马上展示图像，不需要先上传到服务端，减少服务端的垃圾图像

2.前端可以压缩、处理后上传到服务端，减少传输过程中的等待时间和服务器压力

缺点：

1.生成编码后保存成图片，倘若不做处理，会比原来的图片容量大，具体原因，搜索关键词：Base64编码为什么会使数据量变大

2.图片越大生成的编码越多，编码越多开发者工具中查看它时卡顿越久，谷歌浏览器好点，360极速直接假死。也就是说会影响前端调试。

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title></title>
     <style>
         td {
             padding: 10px;
         }
     </style>
 </head>
 <body>

     <table>
         <tr>
             <td>选择图片：</td>
             <td><input type="file" id="file1" /></td>
         </tr>
         <tr>
             <td>原图预览：</td>
             <td id="ytyl"></td>
         </tr>
         <tr>
             <td></td>
             <td><input type="button" value="压缩" id="btnYaSuo" /></td>
         </tr>
         <tr>
             <td>压缩预览：</td>
             <td id="ysyl"></td>
         </tr>
         <tr>
             <td></td>
             <td><input type="button" value="上传" id="btnUpload" /></td>
         </tr>
     </table>

     <canvas id="myCanvas" style="display:none">
         Your browser does not support the HTML5 canvas tag.
     </canvas>

     <script>

         file1.onchange = function () {
             if (file1.files.length < 1 || !/image\/\w+/.test(file1.files[0].type)) {
                 //判断格式正则：/image\/png/，/image\/jpeg/，/image\/gif/
                 alert("请确保文件为图像类型");
                 return;
             }
             var reader = new FileReader();
             reader.readAsDataURL(file1.files[0]);
             reader.onload = function (e) {
                 var result = e.target.result;
                 if (result && result.length > 0) {
                     ytyl.innerHTML = '<img src="' + result + '" id="img1" />';
                 }
             };
         };

         btnYaSuo.onclick = function () {
             var imgobj = document.getElementById("img1");
             var canvas = document.getElementById("myCanvas");
             canvas.width = imgobj.width;
             canvas.height = imgobj.height;
             var context = canvas.getContext("2d");
             context.drawImage(imgobj, 0, 0, canvas.width, canvas.height);
             //取值：image/jpeg、image/png（默认值）
             var dataUrl = canvas.toDataURL("image/jpeg", 0.9);
             ysyl.innerHTML = '<img src="' + dataUrl + '" id="img2" />';
         };

         btnUpload.onclick = function () {
             //var imgobj = document.getElementById("img1"); //未压缩的图像
             var imgobj = document.getElementById("img2");
             if (!imgobj) {
                 return;
             }
             //做为普通的字符串POST到服务端
             var data = { "FileData": imgobj.getAttribute("src") };
             //$.post("Handler1.ashx", data, function (res) { }, "json");
         };

     </script>

 </body>
 </html>

Handler1.ashx的处理：

 public void ProcessRequest(HttpContext context)
         {
             string base64Code = context.Request.Form["FileData"];
             if (string.IsNullOrEmpty(base64Code))
             {
                 context.Response.Write("{\"Msg\":\"请上传文件！\"}");
                 context.Response.End();
             }

             string ext = string.Empty;
             if (base64Code.Contains("data:image/jpeg;base64,"))
             {
                 ext = ".jpg";
                 base64Code = base64Code.Substring();
             }
             else if (base64Code.Contains("data:image/png;base64,"))
             {
                 ext = ".png";
                 base64Code = base64Code.Substring();
             }
             else
             {
                 context.Response.Write("{\"Msg\":\"文件格式只支持JPG、PNG！\"}");
                 context.Response.End();
             }

             DateTime now = DateTime.Now;
             string fileName = Guid.NewGuid().ToString() + ext;
             string relPath = string.Format("/Upload/{0}{1}{2}/", now.Year.ToString(), now.Month.ToString(), now.Day.ToString());
             string absPath = HttpContext.Current.Request.MapPath("~" + relPath);
             if (!Directory.Exists(absPath))
             {
                 Directory.CreateDirectory(absPath);
             }
             byte[] arr = Convert.FromBase64String(base64Code);
             MemoryStream ms = new MemoryStream(arr);
             new Bitmap(ms).Save(absPath + fileName);

             context.Response.Write("{\"Msg\":\"上传成功！\",\"Path\":\"" + relPath + fileName + "\"}");
             context.Response.End();
         }