javaweb上传文件夹

我们平时经常做的是上传文件，上传文件夹与上传文件类似，但也有一些不同之处，这次做了上传文件夹就记录下以备后用。

首先我们需要了解的是上传文件三要素：

1.表单提交方式:post (get方式提交有大小限制,post没有)

2.表单的enctype属性:必须设置为multipart/form-data. 

3.表单必须有文件上传项:file，且文件项需要给定name值

上传文件夹需要增加一个属性webkitdirectory，像这样：

<input id="fileFolder" name="fileFolder" type="file"  webkitdirectory>

工程截图

部分脚本代码展示

前端代码

//文件上传对象

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.arrFilesComplete.push(this);

        this.State = this.Config.state.Complete;

        //从上传列表中删除

        this.Manager.RemoveQueuePost(this.fileSvr.id);

        //从未上传列表中删除

        this.Manager.RemoveQueueWait(this.fileSvr.id);

        var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };

        $.ajax({

            type: "GET"

             , dataType: 'jsonp'

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

             , url: _this.Config["UrlComplete"]

             , data: param

             , success: function (msg)

             {

                 _this.event.fileComplete(_this);//触发事件

                 _this.FileListMgr.UploadComplete(_this.fileSvr);//添加到服务器文件列表

                 _this.post_next();

             }

             , error: function (req, txt, err) { alert("文件-向服务器发送Complete信息错误！" + req.responseText); }