webUploader上传组件 实际运用小结
WebUploader组件实际介绍:
- 官网:http://fex.baidu.com/webuploader/doc/index.html
- 组件优势及优化总结:http://itindex.net/detail/49267-webuploader-%E6%96%87%E4%BB%B6-%E4%B8%8A%E4%BC%A0
- 组件暂停功能的问题:https://github.com/fex-team/webuploader/issues/488
- 断点续传问题:https://github.com/fex-team/webuploader/issues/142
- 具体思路可以先参考链接:http://www.sxrczx.com/pages/blog.kazaff.me/uxgb1423648892626.html
以下内容于你对上述组件有了大致了解的基础上,结合C#实现大文件的上传、断点续传、分块等功能,展开说明的:
设计思路:在每次文件上传前,获取该文件的MD5值作为该文件的唯一标识符,然后对该文件进行分块处理(此处每块设置5M大小,详见2),按块分发请求(此处设置为3个线程发请求,详见2)文件开始上传前触发,一个文件只会触发一次 uploadStart事件,该事件会验证之前该文件是否已上传部分,返回已上传部分的块数编号列表,然后在下一个事件before-send(在文件分片处理之后,上传之前会触发)判断哪些块数已存在,上传不存在的文件块,至此基本上传流程已完成。
/// <summary>
/// 文件上传消息类
/// </summary>
public class UploaderResult
{
public UploaderResult()
{
this.IsOver = false;
this.Chunk = ;
this.Chunks = ;
this.FileExtist = false;
this.ChunkNum = new List<int>();
} /// <summary>
/// 文件名称、当上传完成时将返回最终的文件名
/// </summary>
public string Name { get; set; } /// <summary>
/// 文件是否全部上传完成
/// </summary>
public bool IsOver { get; set; } /// <summary>
/// 消息
/// </summary>
public string Message { get; set; } /// <summary>
/// 如果为分块上传、返回当前的分块索引
/// </summary>
public int Chunk { get; set; } /// <summary>
/// 总的分块大小
/// </summary>
public int Chunks { get; set; } /// <summary>
/// 文件的MD5码
/// </summary>
public string Md5 { get; set; } /// <summary>
/// 上传的文件是否已经存在于服务器
/// </summary>
public bool FileExtist { get; set; } /// <summary>
/// 服务器已经存在的区块序号
/// </summary>
public List<int> ChunkNum { get; set; } /// <summary>
/// 文件扩展名
/// </summary>
public string FileExtension { get; set; } /// <summary>
/// 文件路径
/// </summary>
public string FilePath { get; set; } /// <summary>
/// 文件大小
/// </summary>
public int FileSize { get; set; }
}
/// <summary>
/// 断点续传检测、MD5检测 秒传亦可以在这个方法块中实现,看需求
/// </summary>
public static UploaderResult ProcessCheck(HttpRequestBase request, string savepath = null
, Func<HttpPostedFileBase, string> setfilename = null, Func<string, bool> md5check = null)
{
UploaderResult obj = new UploaderResult();
string tempFilePath = savepath + "temp\\" + request["md5"] + "\\"; //文件大小
long size = request.Form["size"] == null ? : Convert.ToInt64(request.Form["size"]); //文件分块大小
long chunksize = request.Form["chunksize"] == null ? : Convert.ToInt64(request.Form["chunksize"]); //文件区块总数
int chunks = chunksize != ? Convert.ToInt32(size / chunksize) : ;
int j = ;
for (int i = ; i <= chunks; i++)
{
if (File.Exists(tempFilePath + i.ToString()))
{
obj.ChunkNum.Add(i);//服务器已经存在的区块编号
j++;
}
}
obj.Message = string.Format("服务器已经存在区块数量{0},总区块数量{1},占比{2}%", j
, chunks + , chunks != && j != ? Convert.ToDouble(Convert.ToDouble(j) / Convert.ToDouble(chunks)) * : );
return obj;
}
/// <summary>
/// 文件上传、保存
/// </summary>
/// <param name="request"></param>
/// <param name="savepath"></param>
/// <returns></returns>
public static UploaderResult UploadSingleProcess(HttpRequestBase request, string savepath = null)
{
UploaderResult obj = new UploaderResult();
if (request.Files.Count == )
{
obj.Message = "请求中不包含文件流信息";
return obj;
}
if (request["size"] == null)
{
obj.Message = "文件大小为空";
return obj;
}
string tempFilePath = savepath + "temp\\" + request["md5"] + "\\";
string saveFilePath = savepath + "files\\";
if (!Directory.Exists(saveFilePath))
{
Directory.CreateDirectory(saveFilePath);
}
//判断是否分片,若文件大小不足分片,则直接保存
if (request.Form.AllKeys.Any(m => m == "chunk"))
{
//分片时创建临时文件目录
if (!Directory.Exists(tempFilePath))
{
Directory.CreateDirectory(tempFilePath);
}
//取得chunk和chunks
int chunk = Convert.ToInt32(request.Form["chunk"]);
int chunks = Convert.ToInt32(request.Form["chunks"]);
HttpPostedFileBase file = request.Files[];
//根据GUID创建用该GUID命名的临时文件
file.SaveAs(tempFilePath + chunk.ToString());
//判断是否所有的分块都已经上传完毕
string[] fileArr = Directory.GetFiles(tempFilePath);
if (fileArr.Length == chunks) {
obj.IsOver = true;
}
}
else
{
request.Files[].SaveAs(saveFilePath + request.Files[].FileName);
obj.IsOver = true;
}
return obj;
}
/// <summary>
/// 文件块合并
/// </summary>
/// <returns></returns>
public ActionResult MergeFiles()
{
string ext = Request.Form["fileExt"];
string fileName = Request.Form["fileName"];
string chunkNum = Request.Form["chunkNum"];
string md5 = Request.Form["md5"];
string tempFilePath = this.RootFolder + "\\temp\\" + md5 + "\\";
string saveFilePath = this.RootFolder + "\\files\\" + fileName;
string[] fileArr = Directory.GetFiles(tempFilePath);
try
{
lock (tempFilePath)
{
if (Convert.ToInt32(chunkNum) == fileArr.Length)
{
if (System.IO.File.Exists(saveFilePath))
{
System.IO.File.Delete(saveFilePath);
}
FileStream addStream = new FileStream(saveFilePath, FileMode.Append, FileAccess.Write);
BinaryWriter AddWriter = new BinaryWriter(addStream);
for (int i = ; i < fileArr.Length; i++)
{
//以小文件所对应的文件名称和打开模式来初始化FileStream文件流,起读取分割作用
FileStream TempStream = new FileStream(tempFilePath+i, FileMode.Open);
//用FileStream文件流来初始化BinaryReader文件阅读器,也起读取分割文件作用
BinaryReader TempReader = new BinaryReader(TempStream);
//读取分割文件中的数据,并生成合并后文件
AddWriter.Write(TempReader.ReadBytes((int)TempStream.Length));
//关闭BinaryReader文件阅读器
TempReader.Close();
TempStream.Close();
}
AddWriter.Close();
addStream.Close();
AddWriter.Dispose();
addStream.Dispose();
Directory.Delete(tempFilePath, true);
}
//验证文件的MD5,确定文件的完整性 前端文件MD5值与后端合并的文件MD5值不相等
//if (UploaderHelper.GetMD5HashFromFile(saveFilePath) == md5)
//{
// int i = 1;
//}
return Json("{hasError:\"false\"}");
}
}
catch (Exception ex)
{
return Json("{hasError:\"true\"}");
}
}
后台代码,还需要整理优化,当然如果有问题,大家可以一块学习谈论。
webUploader上传组件 实际运用小结的更多相关文章
- SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片
SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片 在上一篇文章中,我们介绍了< SpringMVC上传图片的常规上传方法 >.本文接着第一 ...
- webuploader 上传文件 生成链接下载文件
最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...
- Baidu WebUploader 前端文件上传组件的使用
简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...
- 百度上传组件 WebUploader
WebUploader http://fex.baidu.com/webuploader/doc/index.html WebUploader API 文档详细解读 源码以及示例:https://gi ...
- 从零开始编写自己的C#框架(23)——上传组件使用说明
文章导航 1.前言 2.上传组件功能说明 3.数据库结构 4.上传配置管理 5.上传组件所使用到的类 6.上传组件调用方法 7.效果演示 8.小结 1.前言 本系列所使用的是上传组件是大神July开发 ...
- webuploader上传文件,图片
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.官方地址:http://fex.baidu.com/webupload ...
- webuploader 上传文件参数设置
webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader 的官方文档: 最近在使用webUploader时,需要添加额外的参数,并在后台获取,参数 ...
- Web Uploader - 功能齐全,完美兼容 IE 的上传组件
文件上传是网站和 Web 应用程序的常用功能,一直没有一款完美的文件上传组件,因此让很多开发人员碰到头疼的浏览器兼容问题. WebUploader 是由 Baidu FEX 团队开发的一款以 HTML ...
- vue文件夹上传组件选哪个好?
一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...
随机推荐
- HTML Imports
为什么需要导入? 先想想你在 web 上是如何加载不同类型的资源.对于 JS,我们有 <script src>.<link rel="stylesheet"> ...
- 关于android布局的两个属性dither和tileMode
首先,两个单词的中文意思分别是dither(抖动)和tileMode(平铺) 1,先来介绍tileMode(平铺) 它的效果类似于 让背景小图不是拉伸而是多个重复(类似于将一张小图设置电脑桌面时的效果 ...
- [LeetCode#202] Roman to Integer
Problem: Write an algorithm to determine if a number is "happy". A happy number is a numbe ...
- Node.js权威指南 (8) - 创建HTTP与HTTPS服务器及客户端
8.1 HTTP服务器 / 177 8.1.1 创建HTTP服务器 / 177 8.1.2 获取客户端请求信息 / 182 8.1.3 转换URL字符串与查询字符串 / 184 8.1.4 发送服务器 ...
- 转 ---- Asp.net mvc项目分页功能
1.定义一个分页用的Page<T>类 1 /* 使用示例: 2 var pager = new Pager<Article>( 3 this.ControllerContext ...
- ant 学习与开发
ant 学习与开发 http://www.blogjava.net/amigoxie/archive/2007/11/09/159413.html
- 用Delphi实现WinSocket高级应用
用Delphi实现WinSocket高级应用 默认分类 2009-12-19 16:48 阅读6 评论0 字号: 大大 中中 小小 Socket通信在Windows 中是排队的形式 ...
- AOP Aspect Oriented Programming
原理AOP(Aspect Oriented Programming),也就是面向方面编程的技术.AOP基于IoC基础,是对OOP的有益补充. AOP将应用系统分为两部分,核心业务逻辑(Core bus ...
- VS2010编译libjpeg
环境:win7旗舰版 x64 VS2010 下载源代码下载地址:http://www.ijg.org/,选择windows format file 解压源代码,修改源代码中jconfig.vc为jco ...
- CSS3 概览 更新时间 2014-0412-1317
CSS3 概览 CSS3可以划分为:文字.边框模型.背景.动画等. CSS3颜色模块 CSS2.1的时候可以使用4种颜色方式,直接使用颜色名,如 redRGB值,如 rgb(0,90,255)RGB百 ...