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); }

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

        });

    };

    this.post_complete_quick = function ()

    {

        this.fileSvr.perSvr = "100%";

        this.fileSvr.complete = true;

        this.ui.btn.stop.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);

        //添加到文件列表

        this.FileListMgr.UploadComplete(this.fileSvr);

        this.post_next();

        this.event.fileComplete(this);//觸發事件

    };

    this.post_stoped = function (json)

    {

        this.ui.btn.post.show();

        this.ui.btn.del.show();

        this.ui.btn.cancel.hide();

        this.ui.btn.stop.hide();

        this.ui.msg.text("傳輸已中止....");

 

        if (this.Config.state.Ready == this.State)

        {

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

            this.post_next();

            return;

        }

        this.State = this.Config.state.Stop;

        //從上傳列表中刪除

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

        this.Manager.AppendQueueWait(this.fileSvr.id);//添加到未上傳列表

        //傳輸下一個

        this.post_next();

    };

    this.post_error = function (json)

    {

        this.svr_update();

        this.ui.msg.text(this.Config.errCode[json.value]);

        this.ui.btn.stop.hide();

        this.ui.btn.post.show();

        this.ui.btn.del.show();

 

        this.State = this.Config.state.Error;

        //從上傳列表中刪除

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

        //添加到未上傳列表

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

        this.post_next();

    };

    this.md5_process = function (json)

    {

        var msg = "正在掃描本地文件，已完成：" + json.percent;

        this.ui.msg.text(msg);

    };

    this.md5_complete = function (json)

    {

        this.fileSvr.md5 = json.md5;

        this.ui.msg.text("MD5計算完畢，開始鏈接服務器...");

        this.event.md5Complete(this, json.md5);//biz event

 

        var loc_path = encodeURIComponent(this.fileSvr.pathLoc);

        var loc_len = this.fileSvr.lenLoc;

        var loc_size = this.fileSvr.sizeLoc;

        var param = jQuery.extend({}, this.fields, { md5: json.md5, id: this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() });

 

        $.ajax({

            type: "GET"

            , dataType: 'jsonp'

            , jsonp: "callback" //自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名

            , url: this.Config["UrlCreate"]

            , data: param

            , success: function (sv)

            {

                _this.svr_create(sv);

            }

            , error: function (req, txt, err)

            {

                alert("向服務器發送MD5信息錯誤！" + req.responseText);

                _this.ui.msg.text("向服務器發送MD5信息錯誤");

                _this.ui.btn.del.text("續傳");

            }

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

        });

    };

    this.md5_error = function (json)

    {

        this.ui.msg.text(this.Config.errCode[json.value]);

        //文件大小超過限制,文件大小爲0

        if ("4" == json.value

             || "5" == json.value)

        {

        this.ui.btn.stop.hide();

        this.ui.btn.cancel.show();

        }

        else

        {           

            this.ui.btn.post.show();

            this.ui.btn.stop.hide();

        }

        this.State = this.Config.state.Error;

        //從上傳列表中刪除

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

        //添加到未上傳列表

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

 

        this.post_next();

    };

    this.post_next = function ()

    {

        var obj = this;

        setTimeout(function () { obj.Manager.PostNext(); }, 500);

    };

    this.post = function ()

    {

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

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

        if (this.fileSvr.md5.length > 0)

        {

            this.post_file();

        }

        else

        {

            this.check_file();

        }

    };

    this.post_file = function ()

    {

        this.ui.btn.cancel.hide();

        this.ui.btn.stop.show();

        this.State = this.Config.state.Posting;//

        this.app.postFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc, pathSvr:this.fileSvr.pathSvr,lenSvr: this.fileSvr.lenSvr, fields: this.fields });

    };

    this.check_file = function ()

    {

        //this.ui.btn.cancel.text("中止").show();

        this.ui.btn.stop.show();

        this.ui.btn.cancel.hide();

        this.State = this.Config.state.MD5Working;

        this.app.checkFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc });

    };

    this.stop = function ()

    {

        this.ui.btn.del.hide();

        this.ui.btn.cancel.hide();

        this.ui.btn.stop.hide();

        this.ui.btn.post.hide();

        this.svr_update();

        this.app.stopFile({ id: this.fileSvr.id });       

    };

    //手動中止，通常在StopAll中調用

    this.stop_manual = function ()

    {

        if (this.Config.state.Posting == this.State)

        {

            this.svr_update();

        this.ui.btn.post.show();

        this.ui.btn.stop.hide();

        this.ui.btn.cancel.hide();

            this.ui.msg.text("傳輸已中止....");

            this.app.stopFile({ id: this.fileSvr.id ,tip:false});

            this.State = this.Config.state.Stop;

        }

    };

 

    //刪除，通常在用戶點擊"刪除"按鈕時調用

    this.remove = function ()

    {

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

        this.app.delFile(this.fileSvr);

        this.ui.div.remove();

    };

}

​

 文件塊處理代碼

 

<%@ page language="java" import="up6.DBFile" pageEncoding="UTF-8"%>

 

<%@ page contentType="text/html;charset=UTF-8"%>

<%@ page import="up6.FileBlockWriter" %>

<%@ page import="up6.XDebug" %>

<%@ page import="up6.*" %>

<%@ page import="up6.biz.*" %>

<%@ page import="org.apache.commons.fileupload.FileItem" %>

<%@ page import="org.apache.commons.fileupload.FileItemFactory" %>

<%@ page import="org.apache.commons.fileupload.FileUploadException" %>

<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>

<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>

<%@ page import="org.apache.commons.lang.*" %>

<%@ page import="java.net.URLDecoder"%>

<%@ page import="java.util.Iterator"%>

<%@ page import="net.sf.json.JSONObject"%>

<%@ page import="java.util.List"%>

<%

out.clear();

/*

    此頁面負責將文件塊數據寫入文件中。

    此頁面通常由控件負責調用

    參數：

         uid

         idSvr

         md5

         lenSvr

         pathSvr

         RangePos

         fd_idSvr

         fd_lenSvr

    更新記錄：

         2012-04-12 更新文件大小變量類型，增長對2G以上文件的支持。

         2012-04-18 取消更新文件上傳進度信息邏輯。

         2012-10-25 整合更新文件進度信息功能。減小客戶端的AJAX調用。

         2014-07-23 優化代碼。

         2015-03-19 客戶端提供pathSvr，此頁面減小一次訪問數據庫的操做。

         2016-04-09 優化文件存儲邏輯，增長更新文件夾進度邏輯

         2017-07-13 取消數據庫操做

         2017-10-23 增長刪除文件塊緩存操做

*/

//String path = request.getContextPath();

//String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 

String uid            = request.getHeader("uid");//

String id             = request.getHeader("id");

String lenSvr         = request.getHeader("lenSvr");

String lenLoc         = request.getHeader("lenLoc");

String blockOffset    = request.getHeader("blockOffset");

String blockSize  = request.getHeader("blockSize");

String blockIndex = request.getHeader("blockIndex");

String blockMd5       = request.getHeader("blockMd5");

String complete       = request.getHeader("complete");

String pathSvr        = "";

 

//參數爲空

if( StringUtils.isBlank( uid )

    || StringUtils.isBlank( id )

    || StringUtils.isBlank( blockOffset ))

{

    XDebug.Output("param is null");

    return;

}

 

// Check that we have a file upload request

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory = new DiskFileItemFactory();  

ServletFileUpload upload = new ServletFileUpload(factory);

List files = null;

try

{

    files = upload.parseRequest(request);

}

catch (FileUploadException e)

{// 解析文件數據錯誤 

    out.println("read file data error:" + e.toString());

    return;

  

}

 

FileItem rangeFile = null;

// 獲得全部上傳的文件

Iterator fileItr = files.iterator();

// 循環處理全部文件

while (fileItr.hasNext())

{

    // 獲得當前文件

    rangeFile = (FileItem) fileItr.next();

    if(StringUtils.equals( rangeFile.getFieldName(),"pathSvr"))

    {

         pathSvr = rangeFile.getString();

         pathSvr = PathTool.url_decode(pathSvr);

    }

}

 

boolean verify = false;

String msg = "";

String md5Svr = "";

long blockSizeSvr = rangeFile.getSize();

if(!StringUtils.isBlank(blockMd5))

{

    md5Svr = Md5Tool.fileToMD5(rangeFile.getInputStream());

}

 

verify = Integer.parseInt(blockSize) == blockSizeSvr;

if(!verify)

{

    msg = "block size error sizeSvr:" + blockSizeSvr + "sizeLoc:" + blockSize;

}

 

if(verify && !StringUtils.isBlank(blockMd5))

{

    verify = md5Svr.equals(blockMd5);

    if(!verify) msg = "block md5 error";

}

 

if(verify)

{

    //保存文件塊數據

    FileBlockWriter res = new FileBlockWriter();

    //僅第一塊建立

    if( Integer.parseInt(blockIndex)==1) res.CreateFile(pathSvr,Long.parseLong(lenLoc));

    res.write( Long.parseLong(blockOffset),pathSvr,rangeFile);

    up6_biz_event.file_post_block(id,Integer.parseInt(blockIndex));

   

    JSONObject o = new JSONObject();

    o.put("msg", "ok");

    o.put("md5", md5Svr);

    o.put("offset", blockOffset);//基於文件的塊偏移位置

    msg = o.toString();

}

rangeFile.delete();

out.write(msg);

%>

功能介紹

  

樹形目錄導航。您能夠經過樹型目錄導航和路徑導航欄快速跳轉到指定目錄。在跳轉後樹型目錄將會自動選中當前的目錄。

 

 

路徑導航，點擊根目錄按鈕即可返根目錄

 

 

文件和目錄重命名

 

點擊刪除按鈕

點擊肯定後，頁面中的文件消失

 

 

批量上傳文件

 

粘貼上傳

複製文件夾、文件或圖片

在頁面中選擇好相應的上傳目錄，點擊粘貼上傳按鈕，數據便可快速開始上傳

 

 

批量上傳文件和文件夾

 

 

文件和目錄下載

 

批量下載

同時選擇多個須要下載的文件 

而後點擊下載按鈕，設置下載目錄文件夾

 

 

點擊所有下載，開始下載

 

 

自動加載未上傳完的任務。在刷新瀏覽器或重啓電腦後仍然能夠自動加載未完成的任務。

 

 

下載完成後打開咱們設置的下載目錄文件夾，發現需下載的文件或文件夾確認已下載成功，經確認文件夾內的內容與下載文件夾內容一致

數據庫記錄，支持SQL、MySQL、Oracle

控件包下載：
cab(x86)：http://t.cn/Ai9pmG8S

cab(x64)：http://t.cn/Ai9pm04B

xpi：http://t.cn/Ai9pubUc

crx：http://t.cn/Ai9pmrcy

exe：http://t.cn/Ai9puobe

 

示例下載：

jsp-eclipse：http://t.cn/Ai9p3LSx

jsp-myeclipse：http://t.cn/Ai9p3IdC

 

在線教程：

jsp-文件管理器教程：http://j.mp/2WJ2Y1m