前言：

大文件传输一直是技术上的一大难点。文件过大时，一些性提交所有的内容进内存是不现实的。大文件带来问题还有是否支持断点传输和多文件同时传输。

本文以resumableJs为例，介绍了如何在ASP.NET中实现大文件传输。同时本文利用了Html5的新特性：支持拖拽。

本文的主要技术点在于：如何接收resumableJs的传送内容（官网不太清楚）和如何合并文件，难度并不高。如果要改为MVC中的Controller处理文件传输，方法也大同小异。

注：原博客中，此文章在原站点个人代码备份所用，注释不多，如有不懂，请在评论中给出。

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPIAAAA3CAIAAAC5L4D0AAAEsklEQVR4nO2YS3IaMRCGxYJd9vgK5AhQxcZLcgDnArioyspeOoeYolxlb5xjQEjFFxlt4jwc4gd2bMePwTZZMEgtqTVDCCSD6v9Ki5lWq9Vq/tFoEAkAwSGOAAgOcXJ6fjw4+Xo8+Pz1+9GX46Mv3z6hoa14E8OLy9Oz4Y+Ts8GP0++D0+PBCRraqjdxdX1z+fNqePHzfHh5Nrw4O0dDW/kmbm/vbn7dXt/8urq+SdsVGtpqN/GQJPcPD3f3D3d398tshzvVlzsfFxfw49tq9fVBvNScC9IOd6ovq7TtHKre+OD11J5VjSy3+N0GF1nbN97F2l8ebCz0d1xOE4+Pj6PR42g0SkajJFle+7BVWdvqLy5gf7tSebUXLzXnYrR4v+lZabz3qlLZ7ucVpL+1prvi/Sb9IfrbleZ+TH6jytaHJBklidxrrjX35ORiahwl/W19XeAmnp6en/4F79+8ePHm/WLjre/KxQUsLN7KWSWQu+uso10pubs+vSeXVgjeSe6ur0bNxfM89Nrlcrvn3MpOo9zo9DqNckqjI/khvXaZ8bF66BTPz5PwalCn7QzNTWAyigSeKQ06FxOEZGUGoR10LbxddhrOglUHZ2cdGc+eUyhlmZRL2iOmwdIufdlrz5bJ/0eM56G7WSptdp1bGdVLpZLq6m7qazrEsXNOk2D1SI49fiXaOyZjMhIwRmSnwc9lBzGSpDcyqtMSqYg+e2at6/XJstg1c5lY4y27mjQtd7pCd2X1SJoXvskLx5yybgnR6jq3MqoJUSNLl1Fteq+GEJsePTF0W7RHRjU1C71Wg8wwyi0jASs6n0bWXFYQ65as0qqQr3L52As1a6RduHKohRpTyqgmhGh10wvSabpOu/XS/yjx/8riZW2s3ZCsx8e1jPVPldpdNTiK4kO5Cfg8lSVrLrPPzUGHnSzAFYLPPjPeB8N5po0ppx1Ey8yArOC6AuIvl7B8Fi5rt0x5sibR1AYhRKtLPD2DWFnnJaA9+TQy53JlzTB1IKsxIvrss8HuAnaeXI+eMN3xmUi+4NOt2ngb8VMVggLIWlmsLnr7B7v1vLJeyG7tgT8y+e1ZuGt0l5AfwXNS4oMbW7V9qCwk88tar97UJa0KVwb/oZZ5WLxna/6NO1MC2nXGszWJ6nmeZ6vYPGdt/lilCunpyoT74MmMoE/Vgcuayid9pSpZa11RXdIyOHbuqJG+NpXyDMXanUZe+Qk4M+feeGRtP0d69/V9W+Z9c7q4T5Ia4O4u3qO1ipA1ho2gtmojmSAPIWN6Wmt1zQNGRA/Ihj97KrX/uCBm6x1t9Eb+T8ZZEshMw+zR62ODGCdl523DhOftWQcIOsJy8XRZ0aiXUzR/EcbkwOJ4F3erHv+FrDlmPNstjyUlUOwXLnCBrHODFPx9Cxggaw7znzts1CvHQmUNQDGArEGAQNYgQCBrECCQNQgQyBoECGQNAgSyBgECWYMAgaxBgEDWIEAgaxAgkDUIEMgaBAhkDQIEsgYBAlmDAIGsQYBA1iBAIGsQIJA1CBDIGgQIZA0CBLIGAQJZgwCBrEGAQNYgQCBrECCQNQgQyBoECGQNAgSyBgECWYMAgaxBgPwGsDR6iJxOIcwAAAAASUVORK5CYII=" alt="" />

ASPX File:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Resumable.js Test</title>

</head>

<body>

    <form id="form1" runat="server">

    <div id="container" style="width:300px;height:200px;background-color:lightgray">        </div>

    </form>

     <span id="info">welcome</span>

    <script src="scripts/resumable.js" type="text/javascript"></script>

    <script  type="text/javascript">

        var showInfo = function (msg) {

            document.getElementById("info").innerHTML = msg;

        }

        showInfo("Test begin");

        var r = new Resumable({

            target: 'FileHandler.ashx',

        });

        r.assignBrowse(document.getElementById('container'));

        r.assignDrop(document.getElementById('container'));

        if (!r.support) showInfo("not support");

        r.on('fileAdded', function (file, event) {

            r.upload();

        });

        r.on('filesAdded', function (array) {

            for (var i = 0; i < array.length; i++) {

                var html = document.getElementById("info").innerHTML;

                html += "<br>"+array[i].name;

            }

        });

        r.on('uploadStart', function () {

            showInfo('start');

        });

        r.on('complete', function () {

            r.files.pop();

          //if want to upload one file multiple times, you should remove it from r.files after completing.

          //pop后，才可再次重新拖拽上传此文件。此机制可避免一次上传多个文件时重复添加，但拖拽上传时不用检测。

        });

        r.on('progress', function (e) {

            showInfo(r.progress());

        });

    </script>

</body>

</html>

FileHandler

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

namespace UploadTest

{

    /// <summary>

    /// Summary description for FileHandler

    /// </summary>

    public class FileHandler : IHttpHandler

    {

        string _tempFolder;

        object _lock = new object();

        public void ProcessRequest(HttpContext context)

        {

            _tempFolder = context.Server.MapPath("~/temp");

            var method = context.Request.HttpMethod;

            if (method.Equals("GET"))

            {

                HandleGet(context);

            }

            if (method.Equals("POST"))

            {

                HandlePost(context);

            }

        }

        private  void HandlePost(HttpContext context)

        {

            var queryString = context.Request.Form;

            if (queryString.Count == 0) return;

            try

            {

                // Read parameters

                var uploadToken = queryString.Get("upload_Token");

                int resumableChunkNumber = int.Parse(queryString.Get("resumableChunkNumber"));

                var resumableTotalChunks = int.Parse(queryString.Get("resumableTotalChunks"));

                 var resumableTotalSize = long.Parse(queryString.Get("resumableTotalSize"));

                var resumableFilename = queryString.Get("resumableFilename");

                // Save File

                if (context.Request.Files.Count == 0)

                {

                    context.Response.StatusCode = (int)System.Net.HttpStatusCode.InternalServerError;

                }

                else

                {

                    var filePath = string.Format("{0}/{1}/{1}.part{2}", _tempFolder, resumableFilename, resumableChunkNumber.ToString("0000"));

                    var directory = Path.GetDirectoryName(filePath);

                    if (File.Exists(directory))

                    {

                        File.Delete(directory);

                    }

                    if (!Directory.Exists(directory))

                    {

                        Directory.CreateDirectory(directory);

                    }

                    if (!System.IO.File.Exists(filePath))

                    {

                        context.Request.Files[0].SaveAs(filePath);

                    }

                    if (IsCompleted(directory,resumableTotalChunks,resumableTotalSize))

                    {

                        MergeFiles(directory);

                    }

                }

            }

            catch (Exception exception)

            {

                throw exception;

            }

        }

        private void HandleGet(HttpContext context)

        {

            var queryString = context.Request.QueryString;

            if (queryString.Count == 0) return;

            try

            {

                // Read parameters

                var uploadToken = queryString.Get("upload_Token");

                int resumableChunkNumber = int.Parse(queryString.Get("resumableChunkNumber"));

                var resumableFilename = queryString.Get("resumableFilename");

                var resumableChunkSize = long.Parse(queryString.Get("resumableChunkSize")); 

                var filePath = string.Format("{0}/{1}/{1}.part{2}", _tempFolder,

                     resumableFilename, resumableChunkNumber.ToString("0000")); 

                // Check for existance and chunksize

                if (System.IO.File.Exists(filePath) && new FileInfo(filePath).Length == resumableChunkSize)

                {

                    context.Response.Status = "200 OK";

                    context.Response.StatusCode = 200;

                }

                else

                {

                    context.Response.Status = "404 Not Found";

                    context.Response.StatusCode = 404;

                }

            }

            catch (Exception exception)

            {

                throw exception;

            }

        }

        private bool IsCompleted(string directory,int numChunks, long totalSize )

        {

            var physicalFolder = Path.Combine(_tempFolder, directory);

            var files = Directory.GetFiles(physicalFolder);

            //numbers

            if (files.Length != numChunks)

                return false;

            //files all exisit

            var fileName = Path.GetFileName(directory);

            for (int i = 1; i <= numChunks; i++)

            {

                var filePath = string.Format("{0}/{1}.part{2}", directory, fileName, i.ToString("0000"));

                if (!File.Exists(filePath))

                {

                    return false;

                }

            }

            //size

            long tmpSize = 0;

            foreach (var file in files)

            {

                tmpSize += new FileInfo(file).Length;

            }

            return totalSize==tmpSize;

        }

        private void MergeFiles(string directoryPath)

        {

                lock (_lock)

                {

                    if (Directory.Exists(directoryPath))

                    {

                        var fileName = Path.GetFileName(directoryPath);

                        var folder = Path.GetDirectoryName(directoryPath);

                        var tempPath = Path.Combine(directoryPath + ".tmp");

                        var files = Directory.GetFiles(directoryPath);

                        files = files.OrderBy(f => f).ToArray();

                        FileStream wholeStream = new FileStream(tempPath, FileMode.Append, FileAccess.Write);

                        for(int i=0;i<files.Length;i++)

                        {

                            FileStream parcialStream = new FileStream(files[i], FileMode.Open);

                            BinaryReader parcialReader = new BinaryReader(parcialStream);

                            byte[] buffer = new byte[parcialStream.Length];

                            buffer = parcialReader.ReadBytes((int)parcialStream.Length);

                            BinaryWriter parcialWriter = new BinaryWriter(wholeStream);

                            parcialWriter.Write(buffer);

                            parcialStream.Close();

                        }

                        wholeStream.Close();

                        Directory.Delete(directoryPath,true);

                        File.Move(tempPath, directoryPath);

                    }

                }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

附录：

1 技术难点

a. 文件过大。修改webconfig无用。

b. 断点续传。

c. 多文件上传。

2 resumable.js

API: http://www.resumablejs.com/

工作流程：

拖文件至DIV -> 开始上传，uploadStart -> 反复触发progress事件 -> compete

主要参数：

Get:

resumableChunkNumber=1&
resumableChunkSize=1048576&
resumableCurrentChunkSize=1048576&
resumableTotalSize=27778318&
resumableType=&
resumableIdentifier=27778318-Samples7z&
resumableFilename=Samples.7z&
resumableRelativePath=Samples.7z&
resumableTotalChunks=26

Post:

—————————–111061030216033
Content-Disposition: form-data; name=”resumableChunkNumber”

140
—————————–111061030216033
Content-Disposition: form-data; name=”resumableChunkSize”

1048576
—————————–111061030216033
Content-Disposition: form-data; name=”resumableCurrentChunkSize”

1048576
—————————–111061030216033
Content-Disposition: form-data; name=”resumableTotalSize”

171309601
—————————–111061030216033
Content-Disposition: form-data; name=”resumableType”

—————————–111061030216033
Content-Disposition: form-data; name=”resumableIdentifier”

171309601-sample7z
—————————–111061030216033
Content-Disposition: form-data; name=”resumableFilename”

sample.7z
—————————–111061030216033
Content-Disposition: form-data; name=”resumableRelativePath”

sample.7z
—————————–111061030216033
Content-Disposition: form-data; name=”resumableTotalChunks”

163
—————————–111061030216033
Content-Disposition: form-data; name=”file”; filename=”blob”
Content-Type: application/octet-stream

XXXCONTENT
—————————–309022088923579–

[开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件的更多相关文章

  1. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  2. Nodejs express、html5实现拖拽上传

    一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...

  3. html5实现拖拽上传

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  4. spring html5 拖拽上传多文件

    注:这仅仅是一个粗略笔记.有些代码可能没用.兴许会再更新一个能够使用的版本号.不足之处,敬请见谅. 1.spring环境搭建,这里使用的是spring3的jar,须要同一时候引入common-IO 和 ...

  5. html5实现拖拽上传头像

    1. 将客户端(本地电脑)中的图片拖到网页中 要点: html5 拖放, FileReader html: <div id="container" ondrop=" ...

  6. HTML5应用之文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...

  7. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  8. DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...

  9. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

随机推荐

  1. Avl树的基本操作（c语言实现）

    #include<stdio.h> #include<stdlib.h> typedef struct AvlNode *Position; typedef struct Av ...

  2. Some regret....

    今天是一个败笔,早上10点才起床,下午又不专心看书,晚上把还是不能静下来...... 把所有的时间都花在了那一篇FlowVisor上了,但是却没有任何收获,居然没看懂,等下好好整理一下逻辑. 明天开始 ...

  3. ajax contenttype

    jquery ajax基本形式: $.ajax({ type: 'POST/get', url: '', data: {"n":n,"m":m}, dataTy ...

  4. The difference between macro and function I/Ofunction comparision(from c and pointer )

    macro is typeless and execute faster than funtion ,becaus of the overhead of calling and returnning ...

  5. python urllib urllib2

    区别 1) urllib2可以接受一个Request类的实例来设置URL请求的headers,urllib仅可以接受URL.这意味着,用urllib时不可以伪装User Agent字符串等. 2) u ...

  6. 将Eclipse项目导入Android Studio出现中文乱码的问题

    以前一直以Eclipse开发项目,最近正在研究Android Studio的使用,首先想到到的是将Eclispe项目导入AS. 可以方便查看以前写过的代码,然后出现了中文乱码的问题,通过搜索了一些资料 ...

  7. 做权限树时 使用EasyUI中Tree

    符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...

  8. SQL2005中使用identity_insert向自动增量字段中写入内

    摘自: http://www.aspbc.com/tech/showtech.asp?id=1117 SQL2005以前的数据库是不允许向自动增量字段中写入内容的,ACCESS也不行,但在SQL200 ...

  9. Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...

  10. （三）、Express 路由、静态文件、

    一.路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等)组成的,涉及到应用如何响应客户端对某个网站节点的访问. 每一个路由都可以有一个或者多个 ...