文件上傳簡單實現是非常容易的，但是想要更高的要求，比如通過ajax上傳文件、一次上傳多個文件、文件比較大等等，這里面的坑就不是很容易填（對于新手來說）。因此在這里我準備通過ajax實現多文件上傳。在開始貼代碼之前，要注意幾點：
1.<input type="file" />是必須要加name的，不知道為什么不加name屬性，后臺獲取不到文件數據（有辦法的大神可以在評論區提醒我），然后是multiple屬性，當multiple="multiple"時，file控件是可以多選需要上傳的文件的（<input type="file" multiple="multiple" name="myFile" />）。
2.form要設enctype為multiple/form-data，multipart/form-data表示:不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值。
3.重點來了，ajax的參數設置里面有大坑（很多人都沒注意ajax的眾多參數），contentType和processData需要設為false，contentType明明被要求為string類型，但是這里要設為false（我也不知道為什么），網上關于contentType的說明大多是"contentType：要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合"，還有個data要設為new FormData($(' ')[0])，想了解其他參數的可看這個
下面就是簡單的前臺代碼：
|
1
2
3
4
|
<form id="uploadForm" enctype="multipart/form-data" action="/Login/uploadFile" method="post"> <input type="file" multiple="multiple" id="PersonFile" name="MyFile" /> <button type="button" id="submitFile" onclick="uploadFile()">提交</button></form> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//上傳文件 function uploadFile() { debugger $.ajax({ url: '/Login/uploadFile', type: 'POST', cache: false, data: new FormData($('#uploadForm')[0]), processData: false, // 關鍵點 contentType: false, // 關鍵點 success: function (result) { if (result.Check) { alert("成功"); } else { alert("失敗"); } var file = $("#PersonFile") file.after(file.clone().val("")); file.remove(); } }); } |
現在輪到后臺了，我這邊后臺是通過System.Web.HttpContext.Current.Request.Files獲取文件數據集的，之后的代碼我將以圖片為例。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
[HttpPost]public ActionResult uploadFile(){ Result<string> check = new Result<string>(); try { HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; int number = 0; for (int i = 0; i < files.Count; i++) { System.Text.StringBuilder fileName = new System.Text.StringBuilder(); fileName.Append(@"D:\"); fileName.Append(DateTime.Now.ToString("yyMMdd")); fileName.Append(@"\"); if (!System.IO.Directory.Exists(fileName.ToString())) { System.IO.Directory.CreateDirectory(fileName.ToString()); } fileName.Append(System.IO.Path.GetFileNameWithoutExtension(files[i].FileName)); fileName.Append(DateTime.Now.ToString("yyMMddHHmmss")); fileName.Append(System.IO.Path.GetExtension(files[i].FileName)); System.IO.Stream sm = files[i].InputStream; if (System.IO.File.Exists(@"D:\水印log.jpg")) { ImageHelper.ZoomAuto(sm, fileName.ToString(), 400, 300, "", @"D:\水印log.jpg"); } else { ImageHelper.ZoomAuto(sm, fileName.ToString(), 400, 300, "水印LOG", ""); } bool ok = System.IO.File.Exists(fileName.ToString()); if (ok) { number++; } } if (number.Equals(files.Count)) { check.Message = "上傳成功！"; check.Check = true; } else { check.Message = "失敗！"; check.Check = false; } return Json(check); } catch(Exception ex) { check.Message = ex.ToString(); check.Check = false; return Json(check); }} |
|
1
2
3
4
5
6
7
8
9
|
/// <summary>/// 返回值/// </summary>public class Result<T>{public string Message { get; set; }public bool Check { get; set; }public IList<T> ResultList { get; set; }} |
其中用到了ImageHelper.ZoomAuto()，這個是吳劍大哥寫的圖片處理類，地址http://www.cnblogs.com/wu-jian/archive/2011/02/21/1959382.html。最后還有一個坑，就是asp.net對一次上傳數據的大小是有限制的，要解除限制才能10個20個文件同時上傳。如何解除限制？在web.config里面配置一下就OK了。代碼如下：
|
1
2
3
4
5
6
|
<system.web> <authentication mode="None" /> <compilation debug="true" targetFramework="4.5" /> <!--<httpRuntime targetFramework="4.5" />--> <httpRuntime executionTimeout="500" maxRequestLength="409600" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" /> </system.web> |
把<httpRuntime >放<system.web>節點下。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
