jQuery webuploader分片上传大文件


Posted in Javascript onNovember 07, 2016

一般在做文件上传的时候,都是通过客户端把要上传的文件上传到服务器,此时上传的文件都在服务器内存,如果上传的是视频等大文件,那么服务器内存就很紧张,而且一般我们都是用flash或者html5做异步上传,如果文件比较大的话,即便是客户端显示文件已经上传了100%,还是会有一个比较长时间的等待,而且当前页面对服务器的请求也会被阻塞。

正常情况下,一般都是在长传完成后,在服务器直接保存。

public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/plain";
   //保存文件
   context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName));
   context.Response.Write("Hello World");
  }

最近项目中用百度开源的上传组件webuploader,官方介绍webuploader支持分片上传。具体webuploader的使用方法见官网http://fex.baidu.com/webuploader/。

var uploader = WebUploader.create({
   auto: true,
   swf:'/webuploader/Uploader.swf',
   // 文件接收服务端。
   server: '/Uploader.ashx',
   // 内部根据当前运行是创建,可能是input元素,也可能是flash.
   pick: '#filePicker',
   chunked: true,//开启分片上传
   threads: 1,//上传并发数
   //由于Http的无状态特征,在往服务器发送数据过程传递一个进入当前页面是生成的GUID作为标示
   formData: {guid:"<%=Guid.NewGuid().ToString()%>"}
  });

webuploader的分片上传是把文件分成若干份,然后向你定义的文件接收端post数据,如果上传的文件大于分片的尺寸,就会进行分片,然后会在post的数据中添加两个form元素chunk和chunks,前者标示当前分片在上传分片中的顺序(从0开始),后者代表总分片数。

选择一个文件后分了7个分片,所以对Uploader.ashx进行了7次post数据的过程。

jQuery webuploader分片上传大文件

每次请求中的form元素chunk和chunks以及为了标示是同一个文件的分片的GUID

 jQuery webuploader分片上传大文件

在服务器端接收到数据后,就可以根据这些参数进行处理了。

1、按按GUID创建一个临时文件

2、把收到的分片数据追加到对应GUID的文件中。

3、根据上传的文件名重命名临时文件

4、如果没有分片直接保存

public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/plain";
   //如果进行了分片
   if (context.Request.Form.AllKeys.Any(m => m == "chunk"))
   {
    //取得chunk和chunks
    int chunk =Convert.ToInt32(context.Request.Form["chunk"]);
    int chunks = Convert.ToInt32(context.Request.Form["chunks"]);

    
    //根据GUID创建用该GUID命名的临时文件
    string path = context.Server.MapPath("~/1/" + context.Request["guid"]);
    FileStream addFile = new FileStream(path, FileMode.Append, FileAccess.Write);
    BinaryWriter AddWriter = new BinaryWriter(addFile);
    //获得上传的分片数据流
    HttpPostedFile file = context.Request.Files[0];
    Stream stream = file.InputStream;

    BinaryReader TempReader = new BinaryReader(stream);
    //将上传的分片追加到临时文件末尾
    AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
    //关闭BinaryReader文件阅读器
    TempReader.Close();
    stream.Close();
    AddWriter.Close();
    addFile.Close();

    TempReader.Dispose();
    stream.Dispose();
    AddWriter.Dispose();
    addFile.Dispose();
    //如果是最后一个分片,则重命名临时文件为上传的文件名
    if (chunk == (chunks - 1))
    {
     FileInfo fileinfo = new FileInfo(path);
     fileinfo.MoveTo(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName));
    }
   }
   else//没有分片直接保存
   {
    context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName ));
   }
   context.Response.Write("ok");
  }

还存在一些问题没解决,虽然暂时满足需求:

1、如果上传并发超过1个的时候,就会出现一个分片上传服务器还没处理结束,第二个分片同时就到了,那样就会出现文件被占用的错误。
2、如果加锁的办法解决第一个问题,那加锁了就肯定会影响效率(同时只有一个进程能访问保存文件那段代码)。
3、文件的顺序问题,有个可能是第二个分片先到,然后第一个才到,那么就不能一次追加流到临时文件了,只能创建多个临时文件,待所有分片上传完成后,拼接成一个文件。

只是个Demo,希望有人帮助解决下存在的问题。

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中eq和get的区别与使用方法
Apr 14 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
通过命令行生成vue项目框架的方法
Jul 12 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 #Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 #Javascript
功能强大的jquery.validate表单验证插件
Nov 07 #Javascript
JS 实现Base64编码与解码实例详解
Nov 07 #Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 #Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 #Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 #Javascript
You might like
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
php实现websocket实时消息推送
2018/03/30 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
ajax接收后台数据在html页面显示
2017/02/19 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
Python抓取京东图书评论数据
2014/08/31 Python
python简单实现计算过期时间的方法
2015/06/09 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
手写一个python迭代器过程详解
2019/08/27 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
2014年团员学习十八大思想汇报
2014/09/13 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
优秀教师事迹材料
2014/12/15 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS