圖片選擇，預覽及上傳

記得之前老師教咱們寫項目，要實現圖片上傳的功能，咱們都是先用一個input選好圖片，而後單獨作一個提交圖片的按鈕，點擊按鈕，使用form表單提交到後臺，而後經過

// 獲取上傳的文件
HttpPostedFileBase file = Request.Files[0];

這一行來獲取上傳到後臺的文件，而後來驗證上傳的文件是否是圖片，其實在前臺，經過設置input屬性，就能夠限制咱們只能選擇圖片文件了，固然，後臺的驗證也是不能少的，

// 設置accept屬性,限制能選擇的文件類型爲圖片
<input type="file" accept="image/*" id="upload" />

當咱們在前臺提交圖片到後臺，而且，在後臺獲取到以後，下一步，咱們要作的就是上傳圖片了，代碼以下

 1     // 以'.'、'..'、'~'開頭的路徑,均爲相對路徑(推薦使用)
 2     // 以盤符'C:'、'D:',等開頭的,均爲絕對路徑
 3     // 上傳路徑,能夠任意修改
 4     string path = "~/upload";
 5 
 6     // 獲取上傳的文件名(包含後綴)
 7     string FileName = file.FileName;
 8 
 9     // 獲取上傳絕對路徑,若path初始值就是絕對路徑,能夠忽略不寫
10     path = Server.MapPath(path);
11 
12     // 檢測是否存在此路徑,沒有就建立
13     // 需引用命名空間,using System.IO;
14     if (!Directory.Exists(path))    
15         // 建立路徑
16         Directory.CreateDirectory(path);
17 
18     // 上傳文件
19     file.SaveAs(path + FileName);

 

其實寫到這裏圖片上傳就已經成功了，可是，凡事都會有個可是！！

原生的input選擇圖片以後，只能顯示一個文件名吧，若是咱們想選擇圖片以後，馬上可以看到咱們選擇的圖片，那麼問題就來了，怎麼辦？？？

曾經作過一次這種效果，固然，灰常麻煩，早就不用了，不過大概的思路仍是講講吧

1. 給input加一個onchange事件，每次選擇的文件修改以後就會觸發
2. 在onchange事件中添加一個方法(Uoplad)，這個方法要執行的功能就是提交input所在的form表單
3. 提交form表單後，在後臺將提交上來的圖片文件保存在指定位置(path)
4. 這時候path位置確定有那張圖片，在方法Upload中，咱們就能夠直接取path位置拿圖片，更新一下指定img的src屬性就好

這樣寫是能夠實現圖片選擇以後，馬上顯示的效果的，操做麻煩不說，問題也有不少，若是咱們一直挑選圖片，那些被咱們挑過可是不用的圖片都會被上傳，大量的垃圾數據就這樣產生了，並且，反覆提交form表單，對網站的負擔也會比較大的，都說度娘是萬能的，果不其然，找了好久以後，終於被我找到了一個很是不錯的方法

前端js方法：

 1  　　// 選擇圖片預覽方法
 2 　　 // ImgID,顯示預覽圖片的img標籤id
 3 　　 // FileInputID,選擇文件的input標籤id
 4 　　 // MaxLengt,能選擇的最大文件大小(單位:mb),默認2M,能夠忽略不填
 5   　 function ChangImg(ImgID, FileInputID, MaxLength = 2.0) {
 6 
 7         // 觸發Input單擊事件
 8         $("#" + FileInputID).click();
 9 
10         // Input單擊執行
11         $("#" + FileInputID).on("change", function () {
12 
13             //設置上傳的文件最大值（單位：M），超過此值則不上傳。
14             var flength = MaxLength;
15             var size = this.files[0].size;
16 
17             size = (size / 1024 / 1024).toFixed(2);
18 
19             // 判斷是否超過最大大小
20             if (size > MaxLength) {
21                 alert("所選文件大小：" + size + " M，最大文件大小：" + MaxLength + " M");
22 
23                 // 清空Fileinput的值
24                 if (this.outerHTML)
25                     this.outerHTML = this.outerHTML;
26                 else
27                     this.values = "";
28 
29                 // 顯示默認圖片
30                 $("#" + ImgID).attr("src", '/upload/Click.png');
31                 return;
32             }
33 
34             // 獲取圖片的路徑,該路徑不是圖片在本地的路徑
35             var objUrl = null;
36 
37             // 爲文件建立一個Url對象,可能會有一點點兼容性問題
38             objUrl = window.URL.createObjectURL(this.files[0]);
39 
40             if (objUrl)
41                 // 將圖片路徑存入src中,顯示出圖片
42                 $("#" + ImgID).prop("src", objUrl);
43 
44         });
45     }

感謝那位不知名的大神，我在他的基礎上進行了修改，添加了文件大小驗證，由於默認只能上傳兩兆仍是四兆的文件來着，不記得了，反正不大，若是你沒有修改默認配置，而你選擇的文件又恰恰超過了這個範圍，提交form表單的時候絕對會炸的你不要不要的，，，

至於這個方法怎麼用，我也大概的寫了一套模板，跟着模板來確定是沒問題的

前端HTML代碼：

 1  　　<!-- 
 2          必須添加 enctype = "multipart/form-data" 屬性,不然後臺沒法接收到上傳的文件！！
 3          我是基於MVC實現的,其餘的其實也同樣,略微修改就好
 4          嗯,我也沒有加CSS,大家隨意加,,
 5          -->
 6     <form action="/Home/Upload"  enctype = "multipart/form-data">
 7         <p>
 8             <label>選擇圖片:</label>
 9             <label>
10                 <!-- 預覽的圖片，單擊它就能夠選擇圖片 -->
11                 <img src="~/images/Click.png" id="pic" title="單擊選擇圖片" onclick="ChangImg('pic','upload')" />
12                 <!-- 單擊圖片，其實觸發的是它的單擊事件，將其隱藏起來更美觀 -->
13                 <input type="file" accept="image/*" id="upload" style="display:none;" />
14             </label>
15         </p>
16         <!-- 單擊按鈕，便可開始上傳 -->
17         <p> <input type="submit" value="開始上傳" /></p>
18     </form>

後臺代碼：

  1         // 
  2         public ActionResult Upload(){
  3             // 參數看着給,全部的參數都有默認值,均可以修改爲本身經常使用的值
  4             string fileUrl = SaveFile();
  5 
  6             // 若要獲取多文件上傳的值,使用splitChar參數的值進行分割就好,默認splitChar=';',即
  7             // string[] res=fileUrl.Split(';');
  8 
  9             // 判斷fileUrl是否爲空,若爲空,表示沒有上傳文件
 10             if(string.IsNullOrEmpty(fileUrl))
 11                 return Content("上傳失敗!");
 12             // 不爲空時,上傳成功
 13             else
 14                 return Content("上傳成功!");
 15         }        
 16 
 17 
 18         #region 圖片上傳,此方法能夠通用
 19         
 20         /// <summary>
 21         /// 上傳圖片
 22         /// </summary>
 23         /// <param name="type">存儲方式,默認按年份分類</param>
 24         /// <param name="path">上傳路徑,默認值能夠更改成本身經常使用的地址</param>
 25         /// <param name="IsUrl">是否返回路徑,若不返回路徑,就返回文件名稱</param>
 26         /// <param name="format">文件名格式</param>
 27         /// <param name="splitChar">多文件路徑分割符</param>
 28         /// <returns>默認返回圖片上傳的相對路徑,IsUrl爲false時,返回圖片名稱</returns>
 29         public string SaveFile(SaveType type = SaveType.ForYear, string path = "~/upload/",bool IsUrl=true, string format = "yyyyMMddHHmmssffff", char splitChar = ';') {
 30             // 返回全部的上傳路徑，以splitChar分割
 31             string resUrl = "";
 32             // 圖片格式數組
 33             string[] imgFormat = { ".bmp", ".gif", ".png", ".jpg", ".jpeg" };
 34 
 35             // 循環全部的上傳文件
 36             for (int i = 0; i < Request.Files.Count; i++) {
 37 
 38                 // 上傳圖片
 39                 HttpPostedFileBase file = Request.Files[i];
 40                 string FileName = file.FileName; // 上傳的原文件名
 41 
 42                 if (FileName.Length > 0) {
 43 
 44                     // 獲取文件後綴名
 45                     string Suffix = FileName.Substring(FileName.LastIndexOf('.'));
 46 
 47                     // 判斷文件是否爲圖片,若不是圖片,跳出,檢測下一個文件
 48                     if (Array.IndexOf(imgFormat, Suffix) == -1)
 49                         continue;
 50 
 51                     // 拼接文件名稱
 52                     DateTime dateNow = DateTime.Now;
 53                     FileName = dateNow.ToString(format) + Suffix;
 54 
 55                     // 根據存儲方式，修改路徑
 56                     // 增長年份文件夾
 57                     if (Convert.ToInt32(type) >= 1)
 58                         path += dateNow.Year + "/";
 59                     // 增長月份文件夾
 60                     if (Convert.ToInt32(type) >= 2)
 61                         path += dateNow.Month + "/";
 62                     // 增長天數文件夾
 63                     if (Convert.ToInt32(type) >= 3)
 64                         path += dateNow.Day + "/";
 65 
 66                     // 如有多個文件要上傳,將它們一一進行拼接
 67                     if (!string.IsNullOrEmpty(resUrl))
 68                         resUrl += splitChar;
 69     
 70                     // 若返回相對路徑(默認)
 71                     if(IsUrl)
 72                         // .Substring(1),用於去掉第一個字符'~',可視狀況修改或去掉
 73                         resUrl += (path + FileName).Substring(1);
 74                     // 若返回文件名稱
 75                     else
 76                         resUrl += FileName;
 77 
 78                     // 獲取上傳絕對路徑
 79                     path = Server.MapPath(path);
 80 
 81                     // 檢測是否存在此路徑，沒有就建立
 82                     if (!Directory.Exists(path))
 83                         // 建立路徑
 84                         Directory.CreateDirectory(path);
 85 
 86                     // 上傳圖片
 87                     file.SaveAs(path + FileName);
 88                 }
 89             }
 90             return resUrl;
 91         }
 92 
 93         /// <summary>
 94         /// 文件存儲方式,枚舉
 95         /// </summary>
 96         public enum SaveType {
 97             /// <summary>
 98             /// 直接上傳至指定目錄
 99             /// </summary>
100             ForNone = 0,
101             /// <summary>
102             /// 按年份區分上傳，每年的圖片在同一個文件夾
103             /// </summary>
104             ForYear = 1,
105             /// <summary>
106             /// 按月份區分上傳，每月的圖片在同一個文件夾
107             /// </summary>
108             ForMonth = 2,
109             /// <summary>
110             /// 按天份區分上傳，每一天的圖片在同一個文件夾
111             /// </summary>
112             ForDay = 3
113         }
114         #endregion

嗯，到這就差很少，能耐心讀到這裏的都是一個好讀者啊，嘿嘿，謝啦，但願能對大家有所幫助，，，