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
(#换成@)。