js实现上传文件夹

一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了。我这里分享一下我自己开发的一套大文件上传控件供大家参考

控件功能：

1. 文件批量上传

此文件管理器支持文件批量上传。您可以上传30G及以上的大型文件，在上传过程中您不需要担心刷新网页造成的进度丢失问题。也不需要担心浏览器重启或崩溃，电脑重启等极端应用场景造成的进度丢失问题。文件管理器能够自动定时保存文件上传进度。以便为您提供更好的用户体验。

 

2. 文件夹批量上传

此文件管理器提供文件夹的批量上传功能。您可以同时上传一个或者多个文件夹，文件管理器会将这些文件夹以及他们的结构信息同时保存在服务器中。您不需要担心浏览器重启或崩溃造成的进度丢失的问题。

 

3. 文件批量下载

此文件管理器提供了文件批量下载功能。您现在可以同时下载多个文件，并将他们保存在本地指定的目录中。这一功能为图库应用场景，多资料共享应用场景提供了使用便利。

 

4. 文件夹批量下载

此文件管理器提供了文件夹的批量下载功能。您可以同时下载多个文件夹，这些文件夹下载完毕后，他们的层级信息也将会同时在本地保留。

 

5. 新建目录

此文件管理器提供了多层级目录管理功能。您现在可以根据需求新建目录。

 

6. 文件目录重命名。

7. 树型目录导航

8. 路径导航

9. 开源

此文件管理器是开款开源产品，无论您是个人还是企业都可以获取他的源代码来进行二次开发。我们为ASP.NET,JAVA,PHP等语言提供了示例，您可以同时选择这3种开发语言来进行项目开发。同时我们将提供长期的更新和维护服务，帮助企业节省后期的产品维护成本。

 

这是前端部分脚本代码：

//文件上传对象

function FileUploader(fileLoc, mgr)

{

    var _this = this;

    this.id = fileLoc.id;

    this.ui = { msg: null, process: null, percent: null, btn: { del: null, cancel: null,post:null,stop:null }, div: null};

    this.isFolder = false; //不是文件夹

    this.app = mgr.app;

    this.Manager = mgr; //上传管理器指针

    this.event = mgr.event;

    this.FileListMgr = mgr.FileListMgr;//文件列表管理器

    this.Config = mgr.Config;

    this.fields = jQuery.extend({}, mgr.Config.Fields, fileLoc.fields);//每一个对象自带一个fields幅本

    this.State = this.Config.state.None;

    this.uid = this.fields.uid;

    this.fileSvr = {

          pid: ""

        , id: ""

        , pidRoot: ""

        , f_fdTask: false

        , f_fdChild: false

        , uid: 0

        , nameLoc: ""

        , nameSvr: ""

        , pathLoc: ""

        , pathSvr: ""

        , pathRel: ""

        , md5: ""

        , lenLoc: "0"

        , sizeLoc: ""

        , FilePos: "0"

        , lenSvr: "0"

        , perSvr: "0%"

        , complete: false

        , deleted: false

    };//json obj，服务器文件信息

    this.fileSvr = jQuery.extend(this.fileSvr, fileLoc);



    //准备

    this.Ready = function ()

    {

        this.ui.msg.text("正在上传队列中等待...");

        this.State = this.Config.state.Ready;

    };



    this.svr_error = function ()

    {

        alert("服务器返回信息为空，请检查服务器配置");

        this.ui.msg.text("向服务器发送MD5信息错误");

        this.ui.btn.cancel.text("续传");

    };

    this.svr_create = function (sv)

    {

        if (sv.value == null)

        {

            this.svr_error(); return;

        }



        var str = decodeURIComponent(sv.value);//

        this.fileSvr = JSON.parse(str);//

        //服务器已存在相同文件，且已上传完成

        if (this.fileSvr.complete)

        {

            this.post_complete_quick();

        } //服务器文件没有上传完成

        else

        {

            this.ui.process.css("width", this.fileSvr.perSvr);

            this.ui.percent.text(this.fileSvr.perSvr);

            this.post_file();

        }

    };

    this.svr_update = function () {

        if (this.fileSvr.lenSvr == 0) return;

        var param = { uid: this.fields["uid"], offset: this.fileSvr.lenSvr, lenSvr: this.fileSvr.lenSvr, perSvr: this.fileSvr.perSvr, id: this.id, time: new Date().getTime() };

        $.ajax({

            type: "GET"

            , dataType: 'jsonp'

            , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

            , url: this.Config["UrlProcess"]

            , data: param

            , success: function (msg) {}

            , error: function (req, txt, err) { alert("更新文件进度错误！" + req.responseText); }

            , complete: function (req, sta) { req = null; }

        });

    };

    this.post_process = function (json)

    {

        this.fileSvr.lenSvr = json.lenSvr;//保存上传进度

        this.fileSvr.perSvr = json.percent;

        this.ui.percent.text("("+json.percent+")");

        this.ui.process.css("width", json.percent);

        var str = json.lenPost + " " + json.speed + " " + json.time;

        this.ui.msg.text(str);

    };

    this.post_complete = function (json)

    {

        this.fileSvr.perSvr = "100%";

        this.fileSvr.complete = true;

        $.each(this.ui.btn, function (i, n)

        {

            n.hide();

        });

        this.ui.process.css("width", "100%");

        this.ui.percent.text("(100%)");

        this.ui.msg.text("上传完成");

        this.Manager.arrF