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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
Prototype框架详解
Nov 25 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 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 curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php自定义分页类完整实例
2015/12/25 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
Python中几种导入模块的方式总结
2017/04/27 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
python包的导入方式总结
2021/03/02 Python
面试后的感谢信范文
2014/02/01 职场文书
运输服务质量承诺书
2014/03/27 职场文书
班级寄语大全
2014/04/10 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
云冈石窟导游词
2015/02/04 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
爱国主义影片观后感
2015/06/18 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS