在网页中直接上传大文件一直是个比较头疼的问题，主要面临的问题一般包括两类：一是上传时间长中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于4MB的附件。

比较理想的方案是能够把大文件分片，一片一片的传到服务端，再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已，不用整个文件重传，而且每个分片的大小可以控制在4MB以内，服务端不用做任何设置就可适应。

常用的解决方案是RIA，以flex为例，通常是利用FileReference.load方法加载文件得到ByteArray，然后分片构造表单（flash的高版本不允许直接访问文件）。不过这个load方法只能加载较小的文件，大约不超过300MB，因此适用性不是很强。

好在现在有了HTML5，我们可以直接构造分片了，这是一个非常喜人的进步，只可惜目前适用面不广（IE啊IE，真是恨你恨得牙痒痒）。

言归正传，来看一个DEMO吧，基于ASP.Net MVC3，只是示例，很多问题做了简化处理。

主要是客户端，新特性都体现在这里：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>HTML5大文件分片上传示例</title>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script>

        var page = {

            init: function () {

                $("#upload").click($.proxy(this.upload, this));

            },

            upload: function () {

                var file = $("#file")[].files[],  //文件对象

                    name = file.name,        //文件名

                    size = file.size,        //总大小

                    succeed = ;

                var shardSize =  *  * ,    //以2MB为一个分片

                    shardCount = Math.ceil(size / shardSize);  //总片数

                for (var i = ; i < shardCount; ++i) {

                    //计算每一片的起始与结束位置

                    var start = i * shardSize,

                        end = Math.min(size, start + shardSize);

                    //构造一个表单，FormData是HTML5新增的

                    var form = new FormData();

                    form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分

                    form.append("name", name);

                    form.append("total", shardCount);  //总片数

                    form.append("index", i + );        //当前是第几片

                    //Ajax提交

                    $.ajax({

                        url: "Upload.ashx",

                        type: "POST",

                        data: form,

                        async: true,        //异步

                        processData: false,  //很重要，告诉jquery不要对form进行处理

                        contentType: false,  //很重要，指定为false才能形成正确的Content-Type

                        success: function () {

                            ++succeed;

                            $("#output").text(succeed + " / " + shardCount);

                        }

                    });

                }

            }

        };

        $(function () {

            page.init();

        });

    </script>

</head>

<body>

    <input type="file" id="file" />

    <button id="upload">上传</button>

    <span id="output" style="font-size:12px">等待</span>

</body>

</html>

后台一般处理程序代码

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

namespace Html5UploadTest

{

    /// <summary>

    /// Summary description for Upload

    /// </summary>

    public class Upload : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //从Request中取参数，注意上传的文件在Requst.Files中

            string name = context.Request["name"];

            int total = Convert.ToInt32(context.Request["total"]);

            int index = Convert.ToInt32(context.Request["index"]);

            var data = context.Request.Files["data"];

            //保存一个分片到磁盘上

            string dir = context.Request.MapPath("~/temp");

            string file = Path.Combine(dir, name + "_" + index);

            data.SaveAs(file);

            //如果已经是最后一个分片，组合

            //当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上，但要控制好并发防止文件锁冲突

            if (index == total)

            {

                file = Path.Combine(dir, name);

                var fs = new FileStream(file, FileMode.Create);

                for (int i = ; i <= total; ++i)

                {

                    string part = Path.Combine(dir, name + "_" + i);

                    var bytes = System.IO.File.ReadAllBytes(part);

                    fs.Write(bytes, , bytes.Length);

                    bytes = null;

                    System.IO.File.Delete(part);

                }

                fs.Close();

            }

            //返回是否成功，此处做了简化处理

            //return Json(new { Error = 0 });

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

上面的DEMO很多问题是简化处理的，比如没做什么异常处理，客户端也没有判断服务端是否出错重试一类的，各位可以自己完善。

在上面的基础上，我们可以做很多功能上的扩展，比如我们可以控制所有分片是顺序上传还是并发上传，以适用不同应用。再比如我们可以在整体文件上传前以及分片上传前都先计算一下相应的HASH，发个请求询问服务器文件是否已存在，如果存在就不要重复上传了，这样就实现了“极速上传”以及“断点续传”。

利用HTML5分片上传超大文件的更多相关文章

  1. Github Upload Large File 上传超大文件

    Github中单个文件的大小限制是100MB,为了能突破这个限制,我们需要使用Git Large File Storage这个工具,参见这个官方帖子,但是按照其给的步骤,博主未能成功上传超大文件,那么 ...

  2. 【ARM-LInux开发】利用scp 远程上传下载文件/文件夹

    利用scp 远程上传下载文件/文件夹 scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o s ...

  3. PHP/Laravel轻松上传超大文件

    我们知道,在以前,文件上传采用的是直接传整个文件的方式,这种方式对付一些小文件是没有问题的.而当需要上传大文件时,此种方式不仅操作繁琐,需要修改web服务器和后端语言的配置,而且会大量占用服务器的内存 ...

  4. 用百度webuploader分片上传大文件

    一般在做文件上传的时候,都是通过客户端把要上传的文件上传到服务器,此时上传的文件都在服务器内存,如果上传的是视频等大文件,那么服务器内存就很紧张,而且一般我们都是用flash或者html5做异步上传, ...

  5. B/S上传超大文件解决方案

    4GB以上超大文件上传和断点续传服务器的实现 随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求. 但是在很多情况下,平台运营方并没有大文件上 ...

  6. 利用scp 远程上传下载文件/文件夹和ssh远程执行命令

    利用scp传输文件 1.从服务器下载文件scp username@servername:/path/filename /tmp/local_destination例如scp codinglog@192 ...

  7. 【原创】MVC +WebUploader 实现分片上传大文件

    大文件的上传是我一直以来想学习的一个技术点,今天在项目闲暇之时,终于有机会自己尝试了一把,本文仅仅是个Demo,各种错误处理都么有,仅限于大家来学习思路. 参考博文:http://www.cnblog ...

  8. linux利用scp远程上传下载文件/文件夹

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度. 当你服务 ...

  9. 利用scp 远程上传下载文件/文件夹

    scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P port ...

随机推荐

  1. NDK Dev

    1.cdt下载(http://www.eclipse.org/cdt/downloads.php) cdt-8.8.0.zip http://mirrors.opencas.cn/eclipse//t ...

  2. jqGrid在IE中使用iframe嵌套,页码条不显示问题

    在网页顶部加: 红色部分必须是:XHTML1.0

  3. 为Android GridView 设置行背景

    经常有这样的需求,你的功能图标要像一个个物品,摆放在书架上,像这样: 我的思路比较简单,重载GridView,在他绘制子视图前,先把背景绘制完成 1 2 3 4 5 6 7 8 9 10 11 12 ...

  4. mapreduce实战：统计美国各个气象站30年来的平均气温项目分析

    气象数据集 我们要写一个气象数据挖掘的程序.气象数据是通过分布在美国各地区的很多气象传感器每隔一小时进行收集,这些数据是半结构化数据且是按照记录方式存储的,因此非常适合使用 MapReduce 程序来 ...

  5. hdu 4622 Reincarnation（后缀数组）

    hdu 4622 Reincarnation 题意:还是比较容易理解,给出一个字符串,最长2000,q个询问,每次询问[l,r]区间内有多少个不同的字串. (为了与论文解释统一,这里解题思路里sa数组 ...

  6. UITableView学习总结

    一.UITableView概述 UITableView继承自UIScrollView,可以表现为Plain和Grouped两种风格. UITableView有两个Delegate分别为:dataSou ...

  7. Java设计模式02：常用设计模式之工厂模式（创建型模式）

    一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的.  工厂模式在<Java与模式>中分为三类: 1)简单工厂模式(Simple Fact ...

  8. Android Studio学习随笔-UI线程阻塞以及优化

    我们在使用手机的时候,经常会遇到一个问题:先是卡死,然后跳出该程序无响应,是否关闭的提示(当然有可能是我们手机性能太差=.=)这是因为线程的阻塞引起的,在这里我讲述一下UI线程,一般处理程序会在UI线 ...

  9. 基于Html5的兼容所有主流浏览器的在线视频播放器videoJs

    在一个新的项目上需要实现在线视频播放,原本打算借助优酷的视频存储和播放,但是发现这个需要用户注册优酷账户,严重影响用户体验,于是这个方案被毙掉了.于是开始了自己开发一个在线播放器的想法,当然尽量使用已 ...

  10. java读取redis的timeout异常

    http://blog.csdn.net/shuaiokshuai/article/details/23266091 FIFO Fist-in Fisrt-out 先进先出