HTML5 上传图片 到ASP.NET MVC 

  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 style="height:400px;"></div>
107     <div class="showimg" id="showimg" style="border:solid 1px red;"></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互转的方法， 参见我的上一篇博客。

 

posted @ 2016-11-04 22:51  乁卬杨  阅读(655)  评论(0)  编辑  收藏  举报