本章和大家分享的是.NetCore的MVC框架上傳文件的示例，主要講的內容有：form方式提交上傳，ajax上傳，ajax提交+上傳進度效果，Task并行處理+ajax提交+上傳進度，相信當你讀完文章內容后能后好的收獲，如果可以不妨點個贊；由于昨天電腦沒電了，快要寫完的內容沒有保存，今天早上提前來公司從頭開始重新，斷電這情況的確讓人很頭痛啊，不過為了社區的分享環境，這也是值得的，不多說了來進入今天的正篇環節吧；
form方式上傳一組圖片
先來看看咋們html的代碼，這里先簡單說下要上傳文件必須要設置form元素里面的 enctype="multipart/form-data" 屬性和post方式，如果你想要多選上傳文件的話，需要把文件type='file'元素設置她的屬性multiple='multiple'，因此就有了如下內容：
|
1
2
3
4
5
6
7
|
<form class="form-horizontal" action="/Home/FileUp" method="post" enctype="multipart/form-data"> <input type="file" name="MyPhoto" class="form-control" multiple /> <br /> <button class="btn btn-default">form上傳</button> <br /> <span style="color:red">@ViewData["MsgBox"]</span> </form> |
由于采用form提交，這個測試用例只接用了button元素默認的type=submit來提交表單，對應的后臺Action中代碼如下：
|
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
|
/// <summary> /// form提交上傳 /// </summary> /// <param name="user"></param> /// <returns></returns> [HttpPost] public async Task<IActionResult> FileUp(MoUser user) { if (user.MyPhoto == null || user.MyPhoto.Count <= 0) { MsgBox("請上傳圖片。"); return View(); } //var file = Request.Form.Files; foreach (var file in user.MyPhoto) { var fileName = file.FileName; var contentType = file.ContentType; var len = file.Length; var fileType = new string[] { "image/jpeg", "image/png" }; if (!fileType.Any(b => b.Contains(contentType))) { MsgBox($"只能上傳{string.Join(",", fileType)}格式的圖片。"); return View(); } if (len > 1024 * 1024 * 4) { MsgBox("上傳圖片大小只能在4M以下。"); return View(); } var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName); using (var stream = System.IO.File.Create(path)) { await file.CopyToAsync(stream); } } MsgBox($"上傳成功"); return View(); } |
從前端到后端的Action不得不說這種form表單提交的方式挺簡單的，需要注意的是Action這里用的實體模型方式來對應上傳的文件信息，這里自定義了MoUser類，通過屬性 public List<IFormFile> MyPhoto { get; set; } 來匹配html表單中文件type='file'的name屬性名稱name="MyPhoto"：
|
1
2
3
4
5
6
|
public class MoUser { public int UserId { get; set; } = 1; public string UserName { get; set; } = "神牛步行3"; public List<IFormFile> MyPhoto { get; set; } } |
這樣就能通過實體模型的方式把上傳的文件信息存儲在自定義MoUser類中的MyPhoto屬性中了；
ajax上傳一組圖片
這里需要在上面例子中的html處修改一些東西，不再使用form提交，指定了普通button按鈕來觸發ajax的提交，完整html代碼如：
|
1
2
3
4
5
6
7
|
<form class="form-horizontal" id="form01" method="post" enctype="multipart/form-data"> <input type="file" name="MyPhoto01" class="form-control" multiple /> <br /> <button type="button" id="btnAjax" class="btn btn-default">ajax上傳</button> <br /> <span style="color:red" id="span01"></span> </form> |
有了布局，再來看看具體的js實現代碼，這里我采用jquery的ajax提交的方法來操作，也用到了html5新增的FormData來存儲表單的數據：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$("#btnAjax").on("click", function () { var msg = $("#span01"); var form = document.getElementById("form01"); //console.log(form); var data = new FormData(form); $.ajax({ type: "POST", url: "/home/AjaxFileUp", data: data, contentType: false, processData: false, success: function (data) { if (data) { msg.html(data.msg); } }, error: function () { msg.html("上傳文件異常,請稍后重試！"); } }); }); |
至于后臺Action的方法和示例一的相差不大，關鍵點在于這里我直接使用 Request.Form.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
|
/// <summary> /// ajax無上傳進度效果上傳 /// </summary> /// <returns></returns> [HttpPost] public async Task<JsonResult> AjaxFileUp() { var data = new MoData { Msg = "上傳失敗" }; try { var files = Request.Form.Files.Where(b => b.Name == "MyPhoto01"); //非空限制 if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的文件。"; return Json(data); } //格式限制 var allowType = new string[] { "image/jpeg", "image/png" }; if (files.Any(b => !allowType.Contains(b.ContentType))) { data.Msg = $"只能上傳{string.Join(",", allowType)}格式的文件。"; return Json(data); } //大小限制 if (files.Sum(b => b.Length) >= 1024 * 1024 * 4) { data.Msg = "上傳文件的總大小只能在4M以下。"; return Json(data); } //寫入服務器磁盤 foreach (var file in files) { var fileName = file.FileName; var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName); using (var stream = System.IO.File.Create(path)) { await file.CopyToAsync(stream); } } data.Msg = "上傳成功"; data.Status = 2; } catch (Exception ex) { data.Msg = ex.Message; } return Json(data); } |
如果你有耐心讀到這里，那么后面的內容個人感覺對你開發會有好的幫助，不負你期待；
ajax提交+上傳進度+一組圖片上傳
同樣我們先來看對應的html代碼，其實和示例2幾乎一樣，只是把名稱變動了下：
|
1
2
3
4
5
6
7
|
<form class="form-horizontal" id="form02" method="post" enctype="multipart/form-data"> <input type="file" name="MyPhoto02" class="form-control" multiple /> <br /> <button type="button" id="btnAjax02" class="btn btn-default">ajax上傳進度效果上傳</button> <br /> <span style="color:red" id="span02"></span> </form> |
要加一個進度效果，需要用到js的定時器，定時獲取上傳文件的上傳進度數據信息，因此這里通過js的setInterval方法來定時請求一個進度數據接口，注意用完之后需要清除這個定時器，不然一直再不斷請求您接口：
|
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
|
$("#btnAjax02").on("click", function () { var interBar; var msg = $("#span02"); msg.html("上傳中，請稍后..."); var form = document.getElementById("form02"); //console.log(form); var data = new FormData(form); $.ajax({ type: "POST", url: "/home/AjaxFileUp02", data: data, contentType: false, processData: false, success: function (data) { if (data) { msg.html(data.msg); //清除進度查詢 if (interBar) { clearInterval(interBar); } } }, error: function () { msg.html("上傳文件異常,請稍后重試！"); if (interBar) { clearInterval(interBar); } } }); //獲取進度 interBar = setInterval(function () { $.post("/home/ProgresBar02", function (data) { if (data) { var isClearVal = true; var strArr = []; $.each(data, function (i, item) { strArr.push('文件：' + item.fileName + ",當前上傳：" + item.percentBar + '<br/>'); if (item.status != 2) { isClearVal = false; } }); msg.html(strArr.join('')); if (isClearVal) { if (interBar) { clearInterval(interBar); } } } }); }, 200); }); |
既然上面說到單獨的進度數據接口，那么我們除了上傳Action外，也需要進度的Action，而這進度Action得到的上傳文件數據信息必須和上傳的Action一直，因此就需要用到緩存等存儲數據的方式，這里我用的是MemoryCache的方式，對已netcore來說僅僅只需要在起始文件（如：Startup.cs）中添加組件服務：
|
1
2
3
4
5
6
7
8
|
public void ConfigureServices(IServiceCollection services) { // Add framework services. services.AddMvc(); //添加cache支持 services.AddDistributedMemoryCache();} |
然后通過構造函數注入到對應的接口Controller中去：
|
1
2
3
4
5
6
|
readonly IMemoryCache _cache;public HomeController(IOptions<MoOptions> options, ILogger<HomeController> logger, IMemoryCache cache){ this._options = options.Value; _logger = logger; _cache = cache; } |
到此我們就能利用cache來存儲我們上傳進度信息了，來看下處理上傳的Action：
|
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
private string cacheKey = "UserId_UpFile"; private string cacheKey03 = "UserId_UpFile03"; /// <summary> /// ajax上傳進度效果上傳 /// </summary> /// <returns></returns> [HttpPost] public async Task<JsonResult> AjaxFileUp02() { var data = new MoData { Msg = "上傳失敗" }; try { var files = Request.Form.Files.Where(b => b.Name == "MyPhoto02"); //非空限制 if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的文件。"; return Json(data); } //格式限制 var allowType = new string[] { "image/jpeg", "image/png" }; if (files.Any(b => !allowType.Contains(b.ContentType))) { data.Msg = $"只能上傳{string.Join(",", allowType)}格式的文件。"; return Json(data); } //大小限制 if (files.Sum(b => b.Length) >= 1024 * 1024 * 4) { data.Msg = "上傳文件的總大小只能在4M以下。"; return Json(data); } //初始化上傳多個文件的Bar，存儲到緩存中，方便獲取上傳進度 var listBar = new List<MoBar>(); files.ToList().ForEach(b => { listBar.Add(new MoBar { FileName = b.FileName, Status = 1, CurrBar = 0, TotalBar = b.Length }); }); _cache.Set<List<MoBar>>(cacheKey, listBar); //寫入服務器磁盤 foreach (var file in files) { //總大小 var totalSize = file.Length; //初始化每次讀取大小 var readSize = 1024L; var bt = new byte[totalSize > readSize ? readSize : totalSize]; //當前已經讀取的大小 var currentSize = 0L; var fileName = file.FileName; var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName); using (var stream = System.IO.File.Create(path)) { //await file.CopyToAsync(stream); //進度條處理流程 using (var inputStream = file.OpenReadStream()) { //讀取上傳文件流 while (await inputStream.ReadAsync(bt, 0, bt.Length) > 0) { //當前讀取的長度 currentSize += bt.Length; //寫入上傳流到服務器文件中 await stream.WriteAsync(bt, 0, bt.Length); //獲取每次讀取的大小 readSize = currentSize + readSize <= totalSize ? readSize : totalSize - currentSize; //重新設置 bt = new byte[readSize]; //設置當前上傳的文件進度，并重新緩存到進度緩存中 var bars = _cache.Get<List<MoBar>>(cacheKey); var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault(); currBar.CurrBar = currentSize; currBar.Status = currentSize >= totalSize ? 2 : 1; _cache.Set<List<MoBar>>(cacheKey, bars); System.Threading.Thread.Sleep(1000 * 1); } } } } data.Msg = "上傳完成"; data.Status = 2; } catch (Exception ex) { data.Msg = ex.Message; } return Json(data); } |
代碼一下子就變多了，其實按照邏輯來說增加了存儲進度的Cache，和逐一讀取上傳文件流的邏輯而已，具體大家可以仔細看下代碼，都有備注說明；再來就是咋們的進度信息Action接口：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
[HttpPost] public JsonResult ProgresBar02() { var bars = new List<MoBar>(); try { bars = _cache.Get<List<MoBar>>(cacheKey); } catch (Exception ex) { } return Json(bars); } |
進度接口只需要獲取cache中的進度信息就行了，注：這里是測試用例，具體使用場景請各位自行增加其他邏輯代碼；下面就來看下效果截圖：
Task并行處理+ajax提交+上傳進度+一組圖片上傳
這一小節，將會使用Task來處理上傳的文件，通過上一小節截圖能夠看出，如果你上傳多個文件，那么都是按照次序一個一個讀取文件流來生成上傳文件到服務器，這里改良一下利用Task的特點，就能實現同時讀取不同文件流了，先來看下html代碼和js代碼:
|
1
2
3
4
5
6
7
|
<form class="form-horizontal" id="form03" method="post" enctype="multipart/form-data"> <input type="file" name="MyPhoto03" class="form-control" multiple /> <br /> <button type="button" id="btnAjax03" class="btn btn-default">task任務處理ajax上傳進度效果上傳</button> <br /> <span style="color:red" id="span03"></span> </form> |
由于和示例3的js代碼無差別這里我直接貼出代碼：
|
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
|
$("#btnAjax03").on("click", function () { var interBar; var msg = $("#span03"); msg.html("上傳中，請稍后..."); var form = document.getElementById("form03"); //console.log(form); var data = new FormData(form); $.ajax({ type: "POST", url: "/home/AjaxFileUp03", data: data, contentType: false, processData: false, success: function (data) { if (data) { msg.html(data.msg); //清除進度查詢 if (interBar) { clearInterval(interBar); } } }, error: function () { msg.html("上傳文件異常,請稍后重試！"); if (interBar) { clearInterval(interBar); } } }); //獲取進度 interBar = setInterval(function () { $.post("/home/ProgresBar03", function (data) { if (data) { var isClearVal = true; var strArr = []; $.each(data, function (i, item) { strArr.push('文件：' + item.fileName + ",當前上傳：" + item.percentBar + '<br/>'); if (item.status != 2) { isClearVal = false; } }); msg.html(strArr.join('')); if (isClearVal) { if (interBar) { clearInterval(interBar); } } } }); }, 200); }); |
關鍵點在后臺，通過task數組來存儲每個上傳文件的處理任務 Task[] tasks = new Task[len]; ，然后使用 Task.WaitAll(tasks); 等待所有上傳任務的完成，這里特別注意了這里必須等待，不然會丟失上傳文件流(多次測試結果)：
|
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
/// <summary> /// ajax上傳進度效果上傳 /// </summary> /// <returns></returns> [HttpPost] public JsonResult AjaxFileUp03() { var data = new MoData { Msg = "上傳失敗" }; try { var files = Request.Form.Files.Where(b => b.Name == "MyPhoto03"); //非空限制 if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的文件。"; return Json(data); } //格式限制 var allowType = new string[] { "image/jpeg", "image/png" }; if (files.Any(b => !allowType.Contains(b.ContentType))) { data.Msg = $"只能上傳{string.Join(",", allowType)}格式的文件。"; return Json(data); } //大小限制 if (files.Sum(b => b.Length) >= 1024 * 1024 * 4) { data.Msg = "上傳文件的總大小只能在4M以下。"; return Json(data); } //初始化上傳多個文件的Bar，存儲到緩存中，方便獲取上傳進度 var listBar = new List<MoBar>(); files.ToList().ForEach(b => { listBar.Add(new MoBar { FileName = b.FileName, Status = 1, CurrBar = 0, TotalBar = b.Length }); }); _cache.Set<List<MoBar>>(cacheKey03, listBar); var len = files.Count(); Task[] tasks = new Task[len]; //寫入服務器磁盤 for (int i = 0; i < len; i++) { var file = files.Skip(i).Take(1).SingleOrDefault(); tasks[i] = Task.Factory.StartNew((p) => { var item = p as IFormFile; //總大小 var totalSize = item.Length; //初始化每次讀取大小 var readSize = 1024L; var bt = new byte[totalSize > readSize ? readSize : totalSize]; //當前已經讀取的大小 var currentSize = 0L; var fileName = item.FileName; var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName); using (var stream = System.IO.File.Create(path)) { //進度條處理流程 using (var inputStream = item.OpenReadStream()) { //讀取上傳文件流 while (inputStream.Read(bt, 0, bt.Length) > 0) { //當前讀取的長度 currentSize += bt.Length; //寫入上傳流到服務器文件中 stream.Write(bt, 0, bt.Length); //獲取每次讀取的大小 readSize = currentSize + readSize <= totalSize ? readSize : totalSize - currentSize; //重新設置 bt = new byte[readSize]; //設置當前上傳的文件進度，并重新緩存到進度緩存中 var bars = _cache.Get<List<MoBar>>(cacheKey03); var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault(); currBar.CurrBar = currentSize; currBar.Status = currentSize >= totalSize ? 2 : 1; _cache.Set<List<MoBar>>(cacheKey03, bars); System.Threading.Thread.Sleep(1000 * 1); } } } }, file); } //任務等待 ，這里必須等待，不然會丟失上傳文件流 Task.WaitAll(tasks); data.Msg = "上傳完成"; data.Status = 2; } catch (Exception ex) { data.Msg = ex.Message; } return Json(data); } |
至于獲取上傳進度的Action也僅僅只是讀取緩存數據而已：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
[HttpPost] public JsonResult ProgresBar03() { var bars = new List<MoBar>(); try { bars = _cache.Get<List<MoBar>>(cacheKey03); } catch (Exception ex) { } return Json(bars); } |
這里再給出上傳進度的實體類：
|
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
|
public class MoData { /// <summary> /// 0：失敗 1：上傳中 2:成功 /// </summary> public int Status { get; set; } public string Msg { get; set; } } public class MoBar : MoData { /// <summary> /// 文件名字 /// </summary> public string FileName { get; set; } /// <summary> /// 當前上傳大小 /// </summary> public long CurrBar { get; set; } /// <summary> /// 總大小 /// </summary> public long TotalBar { get; set; } /// <summary> /// 進度百分比 /// </summary> public string PercentBar { get { return $"{(this.CurrBar * 100 / this.TotalBar)}%"; } } } |
到此task任務處理上傳文件的方式就完成了，咋們來看圖看效果吧：
能夠通過示例3和4的效果圖對比出，沒使用Task和使用的效果區別，這樣效果您值得擁有，耐心讀完本文內容的朋友，沒讓你失望吧，如果可以不妨點個"贊"或掃個碼支持下作者，謝謝；內容最后附上具體測試用例代碼：.NetCore上傳多文件的幾種示例
以上所述是小編給大家介紹的.NetCore實現上傳多文件的示例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持！
原文鏈接：http://www.cnblogs.com/wangrudong003/p/6692002.html
