.NetCore实现上传多文件的示例详解
本章和大家分享的是.netcore的mvc框架上传文件的示例,主要讲的内容有:form方式提交上传,ajax上传,ajax提交+上传进度效果,task并行处理+ajax提交+上传进度,相信当你读完文章内容后能后好的收获,如果可以不妨点个赞;由于昨天电脑没电了,快要写完的内容没有保存,今天早上提前来公司从头开始重新,断电这情况的确让人很头痛啊,不过为了社区的分享环境,这也是值得的,不多说了来进入今天的正篇环节吧;
form方式上传一组图片
先来看看咋们html的代码,这里先简单说下要上传文件必须要设置form元素里面的 enctype="multipart/form-data" 属性和post方式,如果你想要多选上传文件的话,需要把文件type='file'元素设置她的属性multiple='multiple',因此就有了如下内容:
<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中代码如下:
/// <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"
:
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代码如:
<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来存储表单的数据:
$("#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 方式来获取上传的所有文件,不再使用实体模型的方式了,这样测试用例更多样化吧:
/// <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几乎一样,只是把名称变动了下:
<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方法来定时请求一个进度数据接口,注意用完之后需要清除这个定时器,不然一直再不断请求您接口:
$("#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)中添加组件服务:
public void configureservices(iservicecollection services) { // add framework services. services.addmvc(); //添加cache支持 services.adddistributedmemorycache(); }
然后通过构造函数注入到对应的接口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); //写入服务器磁盘 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接口:
[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代码:
<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代码无差别这里我直接贴出代码:
$("#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); 等待所有上传任务的完成,这里特别注意了这里必须等待,不然会丢失上传文件流(多次测试结果):
/// <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也仅仅只是读取缓存数据而已:
[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任务处理上传文件的方式就完成了,咋们来看图看效果吧:
能够通过示例3和4的效果图对比出,没使用task和使用的效果区别,这样效果您值得拥有,耐心读完本文内容的朋友,没让你失望吧,如果可以不妨点个"赞"或扫个码支持下作者,谢谢;内容最后附上具体测试用例代码:.netcore上传多文件的几种示例
以上所述是小编给大家介绍的.netcore实现上传多文件的示例详解,希望对大家有所帮助