文件上传三：base64文件上传

介绍三种上传方式：

文件上传一：伪刷新上传

文件上传二：FormData上传

文件上传三：base64编码上传

 

优点：

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

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

缺点：

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

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

 

 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的处理：

 

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(23);
    }
    else if (base64Code.Contains("data:image/png;base64,"))
    {
        ext = ".png";
        base64Code = base64Code.Substring(22);
    }
    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);
    FileStream file = System.IO.File.Open(absPath + fileName, FileMode.CreateNew);
    file.Write(arr, 0, arr.Length);
    file.Close();

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

 

posted @ 2017-06-10 17:40  水沽籽  阅读(13824)  评论(0)  编辑  收藏  举报