你的位置:首页 > ASP.net教程

[ASP.net教程]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="http://www.cnblogs.com///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.Controllers10 {11   public class HomeController : Controller12   {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互转的方法, 参见我的上一篇博客。