HTML5 上傳圖片到ASP.NET MVC_ZenDei技術網路在線

HTML5 上傳圖片到ASP.NET MVC

-Advertisement-

其中 C#里圖片和BASE64互轉的方法，參見我的上一篇博客。 ...

  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互轉的方法，參見我的上一篇博客。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

CentOS修改伺服器系統時間

linux安裝完畢後，一般都是國外的世界，一點都不方便設置任務，或者導致網站獲取本地的時間錯亂，所以就需要把伺服器的時間改為和本地時間一致，也就是換成中國的時間。時間按照上面的格式，操作完畢可以再用查看伺服器時間，如果和設置的一樣，就表示成功了 ...
APACHE重寫去除入口文件index.php

下麵我說下 apache 下，如何去掉URL 裡面的 index.php 例如: 你原來的路徑是： localhost/index.php/index 改變後的路徑是: localhost/index 1.httpd.conf配置文件中載入了mod_rewrite.so模塊 //在APACHE里 ...
「ubuntu」通過無線網路安裝Ubuntu Server，啟動系統後如何連接無線網路

通過/etc/network/interfaces配置無線網卡連接WPA-PSK方式加密的Wi-Fi網路 ...
一個技術汪的開源夢 —— 基於 .Net Core 的公共組件之目錄結構

一個技術汪的開源夢 —— 目錄這篇文章是開源公共組件的開篇那就先說說項目的 Github 目錄結構和 .Net Core 的項目結構。 1. GitHub 目錄結構和相關文件 - src 源碼項目目錄。 - test 單元測試項目目錄。 - tools 工具目錄。 - .gitignore 你想要 ...
HTML5 JS 壓縮圖片,並取得圖片的BASE64編碼上傳

基本過程 1) 調用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 將用戶選擇的圖片讀入 Image對象. 2) 在image對象的 onload 事件中, 通過 canvas 的 canvas.getContext('2d') 的 ...
Unity的動態載入簡單使用

Unity的動態載入簡單使用Unity可以快速，輕量化的實現IOC,不用自已寫類似反射代碼來動態載入類或dll了使用Unity先要用nuget獲取相關引用文件Unity可通過代碼或config文件來配置要加動態載入的內容使用示例使用代碼配置載入項使用Config配置載入項 ...
C#通過OleDb查詢Oracle存儲過程

...
Resharper的配置和使用

一：Reshaper簡介 Reshaper是C#開發IDE工具Visual Studio的一款第三方插件，Reshaper讓 VS 變得更強大。優勢是：它提供了一些在 VS 基礎上更方便於程式員開發的功能；劣勢是：它耗掉了更多的記憶體，有可能讓你不夠強大的開發機變得更慢。安裝完畢後，在Visual S ...

HTML5 上傳圖片 到ASP.NET MVC

HTML5 上傳圖片到ASP.NET MVC