首页 > 代码库 > 文件上传三：base64编码上传

文件上传三：base64编码上传

2024-10-04 01:35:39   218人阅读

介绍三种上传方式：

文件上传一：伪刷新上传

文件上传二：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="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/‘ + 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编码上传


联系
我们