asp.net mvc 实现文件上传带进度条的思路与方法

前言

文件上传与下载的操作在实际项目中经常是很重要的一个内容，在使用asp.net web form的时候我们可以使用诸多的服务器控件，fileipload就是其中之一，但是在asp.net不建议使用那些服务器控件，因为那样违反三层架构原则。最近参考网络资料，学习了asp.net mvc如何上传文件。 而这篇文章主要重点是asp.net mvc 实现文件上传带进度条，下面来一起看看吧。

实现思路

ajax异步上传文件，且开始上传文件的时候启动轮询来实时获取文件上传进度。保存进度我采用的是memcached缓存，因为项目其他地方也用了的，所以就直接用这个啦。注意：不能使用session来保存进度，因为session是线程安全的不能实时获取进度，可是试试httpcache或者memorycache，这两个我没有试过，请自行尝试。

ps:使用websocket来实现也是不错的，不过我没有试过，有心的大神可以去试试。

下面贴效果图：

实现方法如下

前端ajax上传文件，我使用了两种jq插件。一种是ajaxfileupload，一种是jquery.form.js(如需下载，请百度)。关于更多jquery插件用法还可参阅本站相关专题： 《jquery常用插件及用法总结》 。

下面的代码是ajaxfileupload的：

$.ajaxfileupload
 (
 {
 url: '/wxmanage/media/uploadimage', //用于文件上传的服务器端请求地址
 secureuri: false, //是否需要安全协议，一般设置为false
 fileelementid: 'postfile', //文件上传域的id
 type:"post",
 datatype: 'json', //返回值类型 一般设置为json
 success: function(data, status) //服务器成功响应处理函数
 {
 closeprogressbar();//关闭进度条 设置进度条进度为100
 if (data.status == 1) {
  layer.msg(data.msg, { icon: 1, time: 1000 },function() {
  parent.location.reload();
  });
 } else {
  $("#btnuploadfile").attr("disabled", false);
  layer.msg(data.msg, { icon: 2, time: 1000 }); 
 }
 },
 error: function(data, status, e) //服务器响应失败处理函数
 {
 $("#btnuploadfile").attr("disabled", false);
 closeprogressbar();
 layer.closeall("dialog");
 layer.msg("上传失败", { icon: 2, time: 1000 });
 }
 }
 );

后端接收文件上传请求的action：

[httppost]
 public actionresult uploadimage(httppostedfilebase postfile)
 {
 if (postfile == null)
 {
 return json(basicconfig.messageconfig.fail("上传文件不得为空"));
 }

 try
 {
 string format = postfile.filename.split('.').last();//后缀名
 savefile(postfile);
 return json(basicconfig.messageconfig.success("上传成功"));
 }
 catch (exception ex)
 {
 return json(basicconfig.messageconfig.fail("上传失败"));
 }
 }

savefile方法是保存文件的方法，采用的是文件流方式保存以便于计算上传进度：

核心代码：

filestream fs = new filestream(filesavepath, filemode.create);
 binarywriter bw = new binarywriter(fs);
 binaryreader br = new binaryreader(postfile[i].inputstream);
 
 int readcount = 0;//单次读取的字节数
 while ((readcount = br.read(bufferbyte, 0, readbuffersize)) > 0)
 {
  bw.write(bufferbyte, 0, readcount);//写入字节到文件流
  bw.flush();
  savecount += readcount;//已经上传的进度
  mem.setvalue("admin_uploadspeed_" + session.sessionid, (savecount * 1.0 / totalcount).tostring("0.00"), 60);//将更新到memcached缓存中
  thread.sleep(200);//为了看到明显的过程故意暂停 
 }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。