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互转的方法， 参见我的上一篇博客。