.NetCore實現(xiàn)上傳多文件的示例詳解
更新時間：2017年04月11日 09:49:39 作者：神牛步行3
本章和大家分享的是.NetCore的MVC框架上傳文件的示例，主要講的內(nèi)容有：form方式提交上傳，ajax上傳，ajax提交+上傳進度效果，Task并行處理+ajax提交+上傳進度，對大家非常有幫助，感興趣的朋友跟隨小編一起學習吧
本章和大家分享的是.NetCore的MVC框架上傳文件的示例，主要講的內(nèi)容有：form方式提交上傳，ajax上傳，ajax提交+上傳進度效果，Task并行處理+ajax提交+上傳進度，相信當你讀完文章內(nèi)容后能后好的收獲，如果可以不妨點個贊；由于昨天電腦沒電了，快要寫完的內(nèi)容沒有保存，今天早上提前來公司從頭開始重新，斷電這情況的確讓人很頭痛啊，不過為了社區(qū)的分享環(huán)境，這也是值得的，不多說了來進入今天的正篇環(huán)節(jié)吧；
form方式上傳一組圖片
先來看看咋們html的代碼，這里先簡單說下要上傳文件必須要設(shè)置form元素里面的 enctype="multipart/form-data" 屬性和post方式，如果你想要多選上傳文件的話，需要把文件type='file'元素設(shè)置她的屬性multiple='multiple'，因此就有了如下內(nèi)容：
<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來提交表單，對應(yīng)的后臺Action中代碼如下：
/// <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這里用的實體模型方式來對應(yīng)上傳的文件信息，這里自定義了MoUser類，通過屬性 public List<IFormFile> MyPhoto { get; set; } 來匹配html表單中文件type='file'的name屬性名稱name="MyPhoto"：
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按鈕來觸發(fā)ajax的提交，完整html代碼如：
<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實現(xiàn)代碼，這里我采用jquery的ajax提交的方法來操作，也用到了html5新增的FormData來存儲表單的數(shù)據(jù)：
$("#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的方法和示例一的相差不大，關(guān)鍵點在于這里我直接使用 Request.Form.Files 方式來獲取上傳的所有文件，不再使用實體模型的方式了，這樣測試用例更多樣化吧：
/// <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);
}
//寫入服務(wù)器磁盤
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);
}
如果你有耐心讀到這里，那么后面的內(nèi)容個人感覺對你開發(fā)會有好的幫助，不負你期待；
ajax提交+上傳進度+一組圖片上傳
同樣我們先來看對應(yīng)的html代碼，其實和示例2幾乎一樣，只是把名稱變動了下：
<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>
要加一個進度效果，需要用到j(luò)s的定時器，定時獲取上傳文件的上傳進度數(shù)據(jù)信息，因此這里通過js的setInterval方法來定時請求一個進度數(shù)據(jù)接口，注意用完之后需要清除這個定時器，不然一直再不斷請求您接口：
$("#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);
});
既然上面說到單獨的進度數(shù)據(jù)接口，那么我們除了上傳Action外，也需要進度的Action，而這進度Action得到的上傳文件數(shù)據(jù)信息必須和上傳的Action一直，因此就需要用到緩存等存儲數(shù)據(jù)的方式，這里我用的是MemoryCache的方式，對已netcore來說僅僅只需要在起始文件（如：Startup.cs）中添加組件服務(wù)：
public void ConfigureServices(IServiceCollection services)
{
// Add framework services.
services.AddMvc();
//添加cache支持
services.AddDistributedMemoryCache();
}
然后通過構(gòu)造函數(shù)注入到對應(yīng)的接口Controller中去：
readonly IMemoryCache _cache;
public HomeController(IOptions<MoOptions> options, ILogger<HomeController> logger, IMemoryCache cache)
{ this._options = options.Value;
_logger = logger;
_cache = cache;
}
到此我們就能利用cache來存儲我們上傳進度信息了，來看下處理上傳的Action：
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);
//寫入服務(wù)器磁盤
foreach (var file in files)
{
//總大小
var totalSize = file.Length;
//初始化每次讀取大小
var readSize = 1024L;
var bt = new byte[totalSize > readSize ? readSize : totalSize];
//當前已經(jīng)讀取的大小
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;
//寫入上傳流到服務(wù)器文件中
await stream.WriteAsync(bt, 0, bt.Length);
//獲取每次讀取的大小
readSize = currentSize + readSize <= totalSize ?
readSize :
totalSize - currentSize;
//重新設(shè)置
bt = new byte[readSize];
//設(shè)置當前上傳的文件進度，并重新緩存到進度緩存中
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接口：
[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提交+上傳進度+一組圖片上傳
這一小節(jié)，將會使用Task來處理上傳的文件，通過上一小節(jié)截圖能夠看出，如果你上傳多個文件，那么都是按照次序一個一個讀取文件流來生成上傳文件到服務(wù)器，這里改良一下利用Task的特點，就能實現(xiàn)同時讀取不同文件流了，先來看下html代碼和js代碼:
<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任務(wù)處理ajax上傳進度效果上傳</button>
<br />
<span style="color:red" id="span03"></span>
</form>
由于和示例3的js代碼無差別這里我直接貼出代碼：
$("#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);
});
關(guān)鍵點在后臺，通過task數(shù)組來存儲每個上傳文件的處理任務(wù) Task[] tasks = new Task[len]; ，然后使用 Task.WaitAll(tasks); 等待所有上傳任務(wù)的完成，這里特別注意了這里必須等待，不然會丟失上傳文件流(多次測試結(jié)果)：
/// <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];
//寫入服務(wù)器磁盤
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];
//當前已經(jīng)讀取的大小
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;
//寫入上傳流到服務(wù)器文件中
stream.Write(bt, 0, bt.Length);
//獲取每次讀取的大小
readSize = currentSize + readSize <= totalSize ?
readSize :
totalSize - currentSize;
//重新設(shè)置
bt = new byte[readSize];
//設(shè)置當前上傳的文件進度，并重新緩存到進度緩存中
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);
}
//任務(wù)等待 ，這里必須等待，不然會丟失上傳文件流
Task.WaitAll(tasks);
data.Msg = "上傳完成";
data.Status = 2;
}
catch (Exception ex)
{
data.Msg = ex.Message;
}
return Json(data);
}
至于獲取上傳進度的Action也僅僅只是讀取緩存數(shù)據(jù)而已：
[HttpPost]
public JsonResult ProgresBar03()
{
var bars = new List<MoBar>();
try
{
bars = _cache.Get<List<MoBar>>(cacheKey03);
}
catch (Exception ex)
{
}
return Json(bars);
}
這里再給出上傳進度的實體類：
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任務(wù)處理上傳文件的方式就完成了，咋們來看圖看效果吧：
能夠通過示例3和4的效果圖對比出，沒使用Task和使用的效果區(qū)別，這樣效果您值得擁有，耐心讀完本文內(nèi)容的朋友，沒讓你失望吧，如果可以不妨點個"贊"或掃個碼支持下作者，謝謝；內(nèi)容最后附上具體測試用例代碼：.NetCore上傳多文件的幾種示例
以上所述是小編給大家介紹的.NetCore實現(xiàn)上傳多文件的示例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
現(xiàn)如今大部分服務(wù)都會有用戶輸入，為了服務(wù)的正常運行，很多時候不得不針對輸入進行敏感詞的檢測、替換。如果人工做這樣的工作，不僅效率低，成本也高。水弟在這里寫了一個讓小編姐姐都覺得快的敏感詞組件接入示例，不需要依賴第三方服務(wù)，只需兩分鐘即可享受清爽文字。2021-05-05
asp.net mvc 動態(tài)編譯生成Controller的方法
本篇文章主要介紹了asp.net mvc 動態(tài)編譯生成Controller的方法，具有一定的參考價值，有興趣的可以了解一下2017-08-08
ASP.NET Core 2.0 支付寶掃碼支付的實現(xiàn)代碼
這篇文章主要介紹了ASP.NET Core 2.0 支付寶掃碼支付的實現(xiàn)代碼,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了ASP.NET微信公眾號查看粉絲信息接口的相關(guān)代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
.NET6?ConfigurationManager的實現(xiàn)及使用方式
這篇文章主要介紹了.NET6?ConfigurationManager的實現(xiàn),我們上面展示的這一部分的ConfigurationManager代碼，其實就是替代了原來的ConfigurationBuilder類的功能，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了asp.net中調(diào)用存儲過程的方法,結(jié)合實例形式分析了存儲過程的建立與asp.net調(diào)用存儲過程的相關(guān)技巧,需要的朋友可以參考下2016-05-05
ASP.NET中實現(xiàn)把form表單元素轉(zhuǎn)為實體對象或集合
這篇文章主要介紹了ASP.NET中實現(xiàn)把form表單元素轉(zhuǎn)為實體對象或集合,本文又是一個對重復數(shù)據(jù)處理的一個封裝,非常實用的開發(fā)技巧,需要的朋友可以參考下2015-06-06
ASPX中的用戶控件與ASP中的INCLUDE方法對比...2006-09-09
dotnet?monitor?是一種工具，它提供了一種統(tǒng)一的方法來收集這些診斷信息，而不管您是在桌面計算機還是在?kubernetes?集群中運行,dotnet?monitor?已經(jīng)為?Azure?App?Service（Linux）提供?.NET?應(yīng)用程序的診斷工具提供支持，我們希望它在更多環(huán)境中使用2021-12-12
動態(tài)向頁面添加控件和使用正則表達式的實現(xiàn)代碼。2009-08-08