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

 更新时间:2021年9月22日 10:05  点击:1310

前言

实现思路

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);//为了看到明显的过程故意暂停 
 }

总结

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

[!--infotagslink--]

相关文章

  • ASP.NET购物车实现过程详解

    这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
  • 在ASP.NET 2.0中操作数据之七十二:调试存储过程

    在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
  • 解决echarts 一条柱状图显示两个值,类似进度条的问题

    这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
  • Php文件上传类class.upload.php用法示例

    本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
  • PHP文件上传一些小收获

    又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
  • jQuery实现简单的文件上传进度条效果

    本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
  • php文件上传你必须知道的几点

    本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
  • ant design中upload组件上传大文件,显示进度条进度的实例

    这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
  • jquery实现模拟百分比进度条渐变效果代码

    本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。运行效果截图如下:在线演示地址如下:http://demo.jb51.net...2015-10-30
  • EXCEL数据上传到SQL SERVER中的简单实现方法

    EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
  • DWVA上传漏洞挖掘的测试例子

    DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
  • ASP.NET Core根据环境变量支持多个 appsettings.json配置文件

    这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
  • PHP swfupload图片上传的实例代码

    PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
  • 记一次EFCore类型转换错误及解决方案

    这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
  • 百度编辑器ueditor修改图片上传默认路径

    本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
  • C#实现带进度条的ListView

    这篇文章主要介绍了C#实现带进度条的ListView 的相关资料,需要的朋友可以参考下...2020-06-25
  • Bootstrap进度条组件知识详解

    在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
  • 借助FileReader实现将文件编码为Base64后通过AJAX上传

    这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25
  • SpringMVC文件上传原理及实现过程解析

    这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15