HTML5 上传图片 到ASP.NET MVC

  • A+
所属分类:JavaScript MVC

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. }  
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: