zoukankan html css js c++ java

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

查看全文

相关阅读:
iSCSI又称为IPSAN
文档类型定义DTD
HDU 2971 Tower
HDU 1588 Gauss Fibonacci
URAL 1005 Stone Pile
URAL 1003 Parity
URAL 1002 Phone Numbers
URAL 1007 Code Words
HDU 3306 Another kind of Fibonacci
FZU 1683 纪念SlingShot

原文地址：https://www.cnblogs.com/ybst/p/6032003.html

HTML5 上传图片 到ASP.NET MVC

HTML5 上传图片到ASP.NET MVC