上传多个文件示例的详细说明 NetCore

编辑：宝哥软件园来源：互联网时间：2021-09-05

新天龙八部

评分

本章与您分享一个用MVC框架上传文件的例子。NetCore。主要内容有：表单模式提交上传，ajax中上传，ajax提交中上传进度，Task对ajax提交中上传进度的并行处理。相信你看完文章的内容一定能获得不错的收获。如果可以的话，你不妨赞美一下。由于电脑昨天没电了，所以即将完成的内容没有保存。今天早上，我来到公司从头开始。停电的情况真是让人头疼。不过，为了社区共享环境，还是值得的。我们不谈这个了。让我们进入今天的完整会议；

以表单模式上传一组图片

让我们看看html代码。让我们简单地说，表单元素中的enctype='multipart/form-data '属性和post模式必须设置为上传文件。如果要上传多个文件，需要将file type='file '元素设置为属性multiple='multiple '，这样就有了：

Form class=' Form-horizontal ' Action='/Home/FileUp ' method=' post ' enctype=' multipart/Form-data ' input type=' file ' name=' my photo ' class=' Form-control ' multiple/br/button class=' btnbtn-default ' Form upload/button br/Span style=' color : red ' @ view data[' msgbox ']/Span/Form由于表单是提交的，因此此测试用例仅使用button元素的default type=submit来提交表单，以及相应的

///summary///form submit upload////summary///param name=' user '/param///returns/returns[http post]public async taskiactionresult fileuser(mouse user){ if(user . my photo==null | | user . my photo . count=0){ msgbox('请上传图片。);返回视图()；} //var文件=请求。表单.文件；foreach(用户中的var文件。MyPhoto) { var fileName=file。文件名；var contentType=文件。ContentTypevar len=file。长度；var fileType=new string[]{ ' image/JPEG '，' image/png ' }；if(！文件类型。any (b=b.contains(内容类型)){msgbox ($ '只能上传{ string }格式的图片。联接('，'，fileType)}。');返回视图()；} if (len 1024 * 1024 * 4) {MsgBox('上传图片的大小只能小于4M。');返回视图()；} var path=path.com bin(@ ' d : f learning vs 2017 netcore netcore 01 web app 01 wwwroot my file '，filename)；使用(变量流=系统。创建(路径)){等待文件。CopyToAsync(流)；}} MsgBox($“上传成功”)；返回视图()；}动作从前端到后端不得不说这种表单表单提交方式还是挺简单的。需要注意的是，Action使用实体模型方法来对应上传的文件信息。这里，MoUser类是定制的，属性public ListIFormFile MyPhoto { get设置；}要匹配html格式的文件类型为“文件”的名称属性名称=“我的照片”:

公共类MoUser { public int UserId { get设置；}=1;公共字符串UserName { get设置；}=《神牛行走3》；public listformifile my photo { get；设置；}}这样，上传的文件信息可以通过实体模型的方式存储在自定义MoUser类中的MyPhoto属性中；

Ajax上传了一组图片

在这里，我们需要在上面例子的html中修改一些东西，而不是使用表单提交，我们指定普通按钮按钮来触发ajax提交，完整的html代码如下：

form class=' form-horizontal ' id=' form 01 ' method=' post ' enctype=' multipart/The form-data ' input type=' file ' name=' my photo 01 ' class=' form-control ' multiple/br/Button type=' Button ' id=' BTN Ajax ' class=' BTN BTN-默认' Ajax上传/Button br/span style=' color : red ' id=' span 01 '/span/form有一个布局，下面我们来看看具体的js实现代码，怎么样

$('#btnAjax ').on('click '，function(){ var msg=$(' # span 01 ')；var form=文档。getelementbyid(' form 01 ')；//console.log(表单);var数据=新表单数据(表单);$.ajax({ type: 'POST '，url: '/home/AjaxFileUp '，data: data，contentType: false，processData: false，success : function(data){ if(data){ msg。html(数据。味精)；} }，error: function () { msg.html('上传文件异常，请稍后重试!');} });});至于后台行动的方法和示例一的相差不大，关键点在于这里我直接使用请求。表单。文件方式来获取上传的所有文件，不再使用实体模型的方式了，这样测试用例更多样化吧：

///摘要////Ajax无上传进度效果上传////summary////returns/returns[Httpset]public async tasksonresult AjaxFileup(){ var data=new MoData { Msg='上传失败' };尝试{ var文件=请求形式。文件。其中(b=b . Name=='我的照片01 ')；//非空限制if (files==null || files .Count()=0) {数据.Msg='请选择上传的文件。';返回Json(数据);} //格式限制var allowTYPe=new string[]{ ' image/JPEG '，' image/png ' }；如果(文件。任何(b=！允许类型.包含(b . ContentType))){ 0数据Msg=$ '只能上传{字符串。联接(“，”，allowType)}格式的文件。';返回Json(数据);} //大小限制如果(文件。总和(b=b。长度)=1024 * 1024 * 4) {数据Msg='上传文件的总大小只能在4M以下。';返回Json(数据);} //写入服务器磁盘foreach(文件中的定义变量文件){ var fileName=file .文件名；变量路径=路径。组合(@'D:F学习 vs 2017 netcore netcore 01 webapp 01 wwwroot my file '，FIlename)；使用（变量流=系统。创建（路径)){等待文件复制同步(流);} }数据Msg='上传成功；数据。状态=2;}捕获(例外情况){ 0数据Msg=ex .消息；}返回Json(数据);}如果你有耐心读到这里，那么后面的内容个人感觉对你开发会有好的帮助，不负你期待；

创建交互式、快速动态网页应用的网页开发技术提交上传进度一组图片上传

同样我们先来看对应的超文本标记语言代码，其实和示例2几乎一样，只是把名称变动了下：

form class=' form-horizontal ' id=' form 02 '方法=' post ' enctype=' multipart/form-data '输入类型=' file ' name=' MyPhoto02 ' class=' form-control ' multiple/br/button type=' button ' id=' btnajax 02 ' class=' BTN BTN-默认' ajax上传进度效果上传/button br/span style=' color : red ' id=' span 02 '/span/form要加一个进度效果，需要用到射流研究…的定时器，定时获取上传文件的上传进度数据信息，因此这里通过射流研究…的setInterval方法来定时请求一个进度数据接口，注意用完之后需要清除这个定时器，不然一直再不断请求您接口：

$('#btnAjax02 ').on('click '，function(){ var inter bar；var msg=$(' # span 02 ')；msg.html('上传中，请稍后.');var form=文档。getelementbyid(' form 02 ')；//console.log(表单);var数据=新表单数据(表单);$.ajax({ type: 'POST '，url: '/home/AjaxFileUp02 '，data: data，contentType: false，processData: false，success 3360 function(data){ if(data){ msg。html(数据。味精)；//清除进度查询if(inter bar){ clearInterval(inter bar)；} } }，error: function () { msg.html('上传文件异常，请稍后重试!');if(inter bar){ clearInterval(inter bar)；} } });//获取进度inter bar=setInterval(function(){ $).post('/home/ProgresBar02 '，函数（数据){ if(数据){ var isclarival=true var strArr=[]；$.每个（数据，函数(I，item) { strArr.push('文件："项目。文件名",当前上传：'项。百分比栏“br/”)；if (item.status！=2){ isclarival=false；} });味精。html(strarr。join(“”)；if(isclarival){ if(inter bar){ clearInterval(inter bar)；} } } });}, 200);});既然上面说到单独的进度数据接口，那么我们除了上传行动外，也需要进度的行动，而这进度行动得到的上传文件数据信息必须和上传的行动一直，因此就需要用到缓存等存储数据的方式，这里我用的是内存缓存的方式，对已网络核心来说仅仅只需要在起始文件（如：Startup.cs)中添加组件服务：

public void ConfigureServices(IServiceCollection services){//添加框架服务。服务addMVc()；//添加躲藏支持服务AddDistributedMemoryCache()；}然后通过构造函数注入到对应的接口控制器中去：

只读IMemoryCache _ cache公共家庭控制器(iopitionsmoooptions选项、ILoggerHomeController记录器、IMemoryCache缓存){这个._选项=选项.价值；_ logger=logger_ cache=cache}到此我们就能利用躲藏来存储我们上传进度信息了，来看下处理上传的行动：

私有字符串cacheKey=' UserId _ UpFile私有字符串cachekey 03=' UserId _ UpFile03///summary////Ajax上传进度效果上传////summary////returns/returns[Httpset]public async tasksonresult AjaxFileup 02(){ var data=new MoData { Msg='上传失败' };尝试{ var文件=请求形式。文件。其中(b=b . Name=='我的照片02 ')；//非空限制if (files==null || files .Count()=0) {数据.Msg='请选择上传的文件。';返回Json(数据);} //格式限制var allowTYPe=new string[]{ ' image/JPEG '，' image/png ' }；如果(文件。任何(b=！允许类型.包含(b . ContentType))){ 0数据Msg=$ '只能上传{字符串。联接(“，”，allowType)}格式的文件。';返回Json(数据);} //大小限制如果(文件。总和(b=b。长度)=1024 * 1024 * 4) {数据Msg='上传文件的总大小只能在4M以下。';返回Json(数据);} //初始化上传多个文件的酒吧，存储到缓存中，方便获取上传进度var listBar=new ListMoBar()；文件ToList().ForEach(b={ listBar .添加（新MoBar { FileName=b.FileName，Status=1，CurrBar=0，TotalBar=b . Length })；});_缓存SetListMoBar(cacheKey，listBar)；//写入服务器磁盘foreach(文件中的定义变量文件){ //总大小var totalSize=文件。长度；//初始化每次读取大小var readSize=1024Lvar bt=新字节[totalSize readSize？readSize : TotalSize]；//当前已经读取的大小var currentSize=0Lvar fileName=文件。文件名；变量路径=路径。组合(@'D:F学习 vs 2017 netcore netcore 01 webapp 01 wwwroot my file '，FIlename)；使用（变量流=系统IO。文件。创建(路径)){//等待文件复制同步(流);//进度条处理流程使用(var inputStream=文件.OpenReadStream()) { //读取上传文件流而(等待输入流ReadAsync(bt，0，bt .长度)0) { //当前读取的长度currentSize=bt .长度；//写入上传流到服务器文件中等待溪流WriteAsync(bt，0，bt .长度);//获取每次读取的大小readSize=当前大小readSize=总大小？readSize : TotalSize-CurrentSize；//重新设置bt=新字节[ReadSize]；//设置当前上传的文件进度，并重新缓存到进度缓存中var bars=_ cache .GetListMoBar(cacheKey)；var currBar=条。其中(b=b.FileName==fileName).SingleOrDefault()；柯巴尔.电流条=电流条.状态=当前大小=总大小？2 : 1;_缓存SetListMoBar(缓存键，条系统。线程。线程。睡眠(1000 * 1);} } } }数据Msg='上传完成；数据。状态=2;}捕获(例外情况){ 0数据Msg=ex .消息；}返回Json(数据);}代码一下子就变多了，其实按照逻辑来说增加了存储进度的缓存，和逐一读取上传文件流的逻辑而已，具体大家可以仔细看下代码，都有备注说明；再来就是咋们的进度信息行动接口：

[httpset]public JsonResult progresbar 02(){ var bar=new ListMoBar()；请尝试{ bars=_ cache .GetListMoBar(cacheKey)；} catch(Exception ex){ } return Json(bar)；}进度接口只需要获取躲藏中的进度信息就行了，注：这里是测试用例，具体使用场景请各位自行增加其他逻辑代码；下面就来看下效果截图：

工作并行处理创建交互式、快速动态网页应用的网页开发技术提交上传进度一组图片上传

这一小节，将会使用工作来处理上传的文件，通过上一小节截图能够看出，如果你上传多个文件，那么都是按照次序一个一个读取文件流来生成上传文件到服务器，这里改良一下利用工作的特点，就能实现同时读取不同文件流了，先来看下超文本标记语言代码和射流研究…代码：

form class=' form-horizontal ' id=' form 03 '方法=' post ' enctype=' multipart/form-data '输入类型=' file ' name=' MyPhoto03 ' class=' form-control ' multiple/br/button type=' button ' id=' btnajax 03 ' class=' BTN BTN-默认'任务任务处理创建交互式、快速动态网页应用的网页开发技术上传进度效果上传/button br/span style=' color : red ' id=' span 03 '/span/form由于和示例3的射流研究…代码无差别这里我直接贴出代码：

$('#btnAjax03 ').on('click '，function(){ var inter bar；var msg=$(' # span 03 ')；msg.html('上传中，请稍后.');var form=文档。getelementbyid(' form 03 ')；//console.log(表单);var数据=新表单数据(表单);$.ajax({ type: 'POST '，url: '/home/AjaxFileUp03 '，data: data，contentType: false，processData: false，success 3360 function(data){ if(data){ msg。html(数据。味精)；//清除进度查询if(inter bar){ clearInterval(inter bar)；} } }，error: function () { msg.html('上传文件异常，请稍后重试!');if(inter bar){ clearInterval(inter bar)；} } });//获取进度inter bar=setInterval(function(){ $).post('/home/ProgresBar03 '，函数（数据){ if(数据){ var isclarival=true var strArr=[]；$.每个（数据，函数(I，item) { strArr.push('文件："项目。文件名",当前上传：'项。百分比栏“br/”)；if (item.status！=2){ isclarival=false；} });味精。html(strarr。join(“”)；if(isclarival){ if(inter bar){ clearInterval(inter bar)；} } } });}, 200);});关键点在后台，通过工作数组来存储每个上传文件的处理任务任务[]任务=新任务[len]；然后使用任务。等待所有（任务);等待所有上传任务的完成，这里特别注意了这里必须等待，不然会丢失上传文件流（多次测试结果):

///摘要////Ajax上传进度效果上传////summary////returns/returns[Httpset]public JsonResult AJaxFileup 03(){ var data=new MoData { Msg='上传失败' };尝试{ var文件=请求形式。文件。其中(b=b . Name==' MyPhoto03 ')；//非空限制if (files==null || files .Count()=0) {数据.Msg='请选择上传的文件。';返回Json(数据);} //格式限制var allowTYPe=new string[]{ ' image/JPEG '，' image/png ' }；如果(文件。任何(b=！允许类型.包含(b . ContentType))){ 0数据Msg=$ '只能上传{字符串。联接(“，”，allowType)}格式的文件。';返回Json(数据);} //大小限制如果(文件。总和(b=b。长度)=1024 * 1024 * 4) {数据Msg='上传文件的总大小只能在4M以下。';返回Json(数据);} //初始化上传多个文件的酒吧，存储到缓存中，方便获取上传进度var listBar=new ListMoBar()；文件ToList().ForEach(b={ listBar .添加（新MoBar { FileName=b.FileName，Status=1，CurrBar=0，TotalBar=b . Length })；});_缓存SetListMoBar(cacheKey03，listBar)；var len=文件count()；任务[]任务=新任务[len]；//写入服务器磁盘for(int I=0；我透镜；i ) { var file=files .跳过.拿(1)来说SingleOrDefault()；任务[i]=任务工厂。start NEw((p)={ var item=p as ifile；//总大小var totalSize=项目.长度；//初始化每次读取大小var readSize=1024Lvar bt=新字节[totalSize readSize？readSize : TotalSize]；//当前已经读取的大小var currentSize=0 var FIlename=item .文件名；变量路径=路径。组合(@'D:F学习 vs 2017 netcore netcore 01 webapp 01 wwwroot my file '，FIlename)；使用（变量流=系统IO。文件。创建(路径)){ //进度条处理流程使用(var inputStream=item .OpenReadStream()) { //读取上传文件流while (inputStream .读取(bt，0，bt .长度)0) { //当前读取的长度currentSize=bt .长度；//写入上传流到服务器文件中小溪。写(bt，0，bt .长度);//获取每次读取的大小readSize=当前大小readSize=总大小？readSize : TotalSize-CurrentSize；//重新设置bt=新字节[ReadSize]；//设置当前上传的文件进度，并重新缓存到进度缓存中var bars=_ cache .GetListMoBar(cachekey 03)；var currBar=条。其中(b=b.FileName==fileName).SingleOrDefault()；柯巴尔.电流条=电流条.状态=当前大小=总大小？2 : 1;_缓存SetListMoBar(cacheKey03，条形);系统。线程。线程。睡眠(1000 * 1);} } } },文件);} //任务等待，这里必须等待，不然会丢失上传文件流任务。等待所有（任务);数据Msg='上传完成；数据。状态=2;}捕获(例外情况){ 0数据Msg=ex .消息；}返回Json(数据);}至于获取上传进度的行动也仅仅只是读取缓存数据而已：

[httpset]public JsonResult progresbar 03(){ var bar=new ListMoBar()；请尝试{ bars=_ cache .GetListMoBar(cachekey 03)；} catch(Exception ex){ } return Json(bar)；}这里再给出上传进度的实体类：

公共类modata {///summary///0:失败1: 2:成功上传////summary public int Status { get；设置；}公共字符串Msg { get设置；} } public class mobar : modata {///summary//文件名////summary public string filename { get；设置；} ///summary ///当前上传大小////summary public long curr bar { get；设置；}///summary///total size////summary public long total bar { get；设置；}///summary////progress percent////summary public string percent bar { get { return $ ' {(this。柯巴* 100/这个。total bar)} % '；}}}此任务处理上传文件的方式结束。我们来看看图片，看看效果：