介绍三种上传方式：
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 }
时间： 2024-11-17 23:21:12