1 @{
2 ViewBag.Title = "Home Page";
3 }
4
5
6 <!DOCTYPE HTML PUBLIC>
7 <html>
8 <head>
9 <meta charset="utf-8">
10 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
11 <title>使用html5 FileReader獲取圖片，並異步上傳到服務器(not iframe)</title>
12
13 <style type="text/css">
14 body {
15 margin: 0px;
16 background: #f2f2f0;
17 }
18
19 p {
20 margin: 0px;
21 }
22
23 .title {
24 color: #FFFF00;
25 background: #000000;
26 text-align: center;
27 font-size: 24px;
28 line-height: 50px;
29 font-weight: bold;
30 }
31
32 .file {
33 position: absolute;
34 width: 100%;
35 font-size: 90px;
36 }
37
38 .filebtn {
39 display: block;
40 position: relative;
41 height: 110px;
42 color: #FFFFFF;
43 background: #06980e;
44 font-size: 48px;
45 line-height: 110px;
46 text-align: center;
47 cursor: pointer;
48 border: 3px solid #cccccc;
49 }
50
51 .filebtn:hover {
52 background: #04bc0d;
53 }
54
55 .showimg {
56 margin: 10px auto 10px auto;
57 text-align: center;
58 }
59 </style>
60
61 <script type="text/javascript">
62
63 window.onload = function () {
64
65 // 選擇圖片
66 document.getElementById('img').onchange = function (event) {
67
68 var img = event.target.files[0];
69
70 // 判斷是否圖片
71 if (!img) {
72 return;
73 }
74
75 // 判斷圖片格式
76 if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {
77 alert('圖片只能是jpg,gif,png');
78 return;
79 }
80
81 var reader = new FileReader();
82 reader.readAsDataURL(img);
83 console.log(3434);
84 reader.onload = function (e) { // reader onload start
85 // ajax 上傳圖片
86 $.post("@Url.Content("~/Home/SaveFile")", { img: e.target.result }, function (ret) {
87
88 console.log(ret.Path);
89
90 alert(ret.Path);
91 $('#showimg').html('<img src="' + ret.Path + '">');
92 alert(ret);
93 }, 'json');
94 } // reader onload end
95 }
96
97 }
98 </script>
99
100 </head>
101
102 <body>
103 <p class="title">使用html5 FileReader獲取圖片，並異步上傳到服務器(not iframe)</p>
104 <p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">請選擇圖片</label></p>
105
106 <div ></div>
107 <div class="showimg" id="showimg" ></div>
108
109
110 </body>
111 </html>
1 using Html5Image.Tools;
2 using System;
3 using System.Collections.Generic;
4 using System.IO;
5 using System.Linq;
6 using System.Web;
7 using System.Web.Mvc;
8
9 namespace Html5Image.Controllers
10 {
11 public class HomeController : Controller
12 {
13 public ActionResult Index()
14 {
15 return View();
16 }
17
18 public JsonResult SaveFile( string img)
19 {
20 int pos = img.IndexOf("base64,");
21 if(pos >= 0)
22 {
23 img = img.Substring(pos + 7);
24 }
25
26 string file = "UploadedImage\\testimg.jpg";
27 string path = Path.Combine(HttpRuntime.AppDomainAppPath, file);
28 ImageTool.SaveFile(img, path, System.Drawing.Imaging.ImageFormat.Jpeg);
29
30 var obj = new { Path= Url.Content("~/" + file) };
31 return Json(obj);
32 //return "233";
33 }
34
35 public ActionResult About()
36 {
37 ViewBag.Message = "Your application description page.";
38
39 return View();
40 }
41
42 public ActionResult Contact()
43 {
44 ViewBag.Message = "Your contact page.";
45
46 return View();
47 }
48 }
49 }
其中 C#裡 圖片和BASE64互轉的方法， 參見我的上一篇博客。
