用百度webuploader分片上传大文件

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

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

  

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

  最近项目中用百度开源的上传组件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数据的过程。

  

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

  

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

  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、文件的顺序问题,有个可能是第二个分片先到,然后第一个才到,那么就不能一次追加流到临时文件了,只能创建多个临时文件,待所有分片上传完成后,拼接成一个文件。

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

时间: 2024-10-22 12:41:53

用百度webuploader分片上传大文件的相关文章

百度Fex webuploader.js上传大文件失败

项目上用百度webuploader.js上传文件,option选项里面已经设置单个文件大小,但是上传低于此阈值的文件时仍然不成功. 我现在的理解是,框架是将文件post到后台服务器端的.. 百度发现是IIS里面对大文件有限制.. <system.webServer> <validation validateIntegratedModeConfiguration="false" /> <modules runAllManagedModulesForAllRe

WebUploader插件上传大文件单文件和多文件JAVA版使用总结

一.使用webuploader插件的原因说明 被现在做的项目坑了. 先说一下我的项目架构Spring+struts2+mybatis+mysql 然后呢.之前说好的按照2G上传就可以了,于是乎,用了ajaxFileUpload插件,因为之前用图片上传也是用这个,所以上传附件的时候就直接拿来用了 各种码代码,测试也测过了,2G文件上传没问题,坑来了,项目上线后,客户又要求上传4G文件,甚至还有20G以上的..纳尼,你不早说哦... 在IE11下用ajaxFileUpload.js插件上传超过4G的

js分片上传大文件,前端代码

首先导入jQuery.form.js文件,下面src是相对于改js文件位置, <script type="text/JavaScript" src="jquery/jquery-form.js"></script> <script type="text/javascript">var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .var slices;var

利用HTML5分片上传超大文件

在网页中直接上传大文件一直是个比较头疼的问题,主要面临的问题一般包括两类:一是上传时间长中途一旦出错会导致前功尽弃:二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默认只能接收小于4MB的附件. 比较理想的方案是能够把大文件分片,一片一片的传到服务端,再由服务端合并.这么做的好处在于一旦上传失败只是损失一个分片而已,不用整个文件重传,而且每个分片的大小可以控制在4MB以内,服务端不用做任何设置就可适应. 常用的解决方案是RIA,以flex为例,通常是利用File

js无刷新上传大文件

这个是看了网上一个的,具体链接忘记了,我手动测试了下 注意:不支持移动端,在安卓和ios上面上传直接卡死了(百度一款大文件上传插件可以参考,兼容了移动端) 直接上demo: 前端html和js部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=&quo

JavaScript上传大文件的三种解决方案

众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹上传,要求:服务端保留层级结构,支持10w级别的文件夹上传. 大文件上传及断点续传,要求:支持50G级的单个文件上传和续传.续传要求:在刷新浏览器后能够续传上传,在重启浏览器后能够继续上传上(关闭浏览器后重新打开),在重启电脑后能够继续上传. 支持PC端全平台,Windows,Mac,Linux 浏

uploadify上传大文件

引言 之前使用Uploadify做了一个上传图片并预览的功能,今天在项目中,要使用该插件上传大文件.之前弄过上传图片的demo,就使用该demo进行测试.可以查看我的这篇文章: [Asp.net]Uploadify所有配置说明,常见bug问题分析 . 大文件上传 第一步:修改uploadify参数 1 'fileSizeLimit': '0',//单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值 2 'fileTypeDesc': '文件',//文件描述Image Files 3

WCF利用Stream上传大文件

WCF利用Stream上传大文件 转自别人的文章,学习这个例子,基本上wcf也算入门了,接口用法.系统配置都有了 本文展示了在asp.net中利用wcf的stream方式传输大文件,解决了大文件上传问题.主要是存档方便以后遇到该问题是来查阅.贴出部分代码,如果有疑惑或需要完整代码的请留言 WebForm1.aspx.cs protected void Button1_Click(object sender, EventArgs e) {             FileData file = n

运用php上传大文件配置方法

网站建设:运用php上传大文件配置方法如下: 翻开php.ini, 1.第一找出 file uploads区域,有影响文件上传的以下几个参数: file_uploads = on ;能否准许经过http上传文件的开关.默许为on即是开 upload_tmp_dir ;文件上传至服务器上存储临时文件的地方,假设没指定就会用系统默许的临时文件夹 upload_max_filesize = 8m ;望文生意,即准许上传文件大小的最大值.默许为2m 2.在resource limits区域,还有参数 ;