你的位置:首页 > 软件开发 > ASP.net > HTML5 上传图片 到ASP.NET MVC

HTML5 上传图片 到ASP.NET MVC

发布时间:2016-11-05 03:00:20
1 @{ 2 ViewBag.Title = "Home Page"; 3 } 4 5 6 <!DOCTYPE HTML PUBLIC> 7 <html> 8 <head> 9 <meta charset= ...
 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='/images/loading.gif' data-original="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     get='_blank'>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='/images/loading.gif' data-original="' + 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> 

原标题:HTML5 上传图片 到ASP.NET MVC

关键词:ASP.NET

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。