jquery 实现文件夹上传(保留目录结构)

文件夹数据库处理逻辑

public class DbFolder

{

    JSONObject root;

   

    public DbFolder()

    {

        this.root = new JSONObject();

        this.root.put("f_id", "");

        this.root.put("f_nameLoc", "根目录");

        this.root.put("f_pid", "");

        this.root.put("f_pidRoot", "");

    }

   

    /**

     * 将JSONArray转换成map

     * @param folders

     * @return

     */

    public Map<String, JSONObject> toDic(JSONArray folders)

    {

        Map<String, JSONObject> dt = new HashMap<String, JSONObject>();

        for(int i = 0 , l = folders.size();i<l;++i)

        {

            JSONObject o = folders.getJSONObject(i);

            String id = o.getString("f_id");

            dt.put(id, o);

        }

        return dt;

    }

   

    public Map<String, JSONObject> foldersToDic(String pidRoot)

    {

        //默认加载根目录

        String sql = String.format("select f_id,f_nameLoc,f_pid,f_pidRoot from up6_folders where f_pidRoot='%s'", pidRoot);

 

        SqlExec se = new SqlExec();

        JSONArray folders = se.exec("up6_folders", sql, "f_id,f_nameLoc,f_pid,f_pidRoot","");

        return this.toDic(folders);

    }

   

    public ArrayList<JSONObject> sortByPid( Map<String, JSONObject> dt, String idCur, ArrayList<JSONObject> psort) {

 

        String cur = idCur;

        while (true)

        {

            //key不存在

            if (!dt.containsKey(cur)) break;

 

            JSONObject d = dt.get(cur);//查父ID

            psort.add(0, d);//将父节点排在前面           

            cur = d.getString("f_pid").trim();//取父级ID

 

            if (cur.trim() == "0") break;

            if ( StringUtils.isBlank(cur) ) break;

        }

        return psort;

    }

   

 

    public JSONArray build_path_by_id(JSONObject fdCur) {

 

        String id = fdCur.getString("f_id").trim();//

        String pidRoot = fdCur.getString("f_pidRoot").trim();//

 

        //根目录

        ArrayList<JSONObject> psort = new ArrayList<JSONObject>();

        if (StringUtils.isBlank(id))

        {

            psort.add(0, this.root);

 

            return JSONArray.fromObject(psort);

        }

 

        //构建目录映射表(id,folder)

        Map<String, JSONObject> dt = this.foldersToDic(pidRoot);

 

        //按层级顺序排列目录

        psort = this.sortByPid(dt, id, psort);

 

        SqlExec se = new SqlExec();

        //是子目录->添加根目录

        if (!StringUtils.isBlank(pidRoot))

        {

            JSONObject root = se.read("up6_files"

                    , "f_id,f_nameLoc,f_pid,f_pidRoot"

                    , new SqlParam[] { new SqlParam("f_id", pidRoot) });

            psort.add(0, root);

        }//是根目录->添加根目录

        else if (!StringUtils.isBlank(id) && StringUtils.isBlank(pidRoot))

        {

            JSONObject root = se.read("up6_files"

                    , "f_id,f_nameLoc,f_pid,f_pidRoot"

                    , new SqlParam[] { new SqlParam("f_id", id) });

            psort.add(0, root);

        }

        psort.add(0, this.root);

 

        return JSONArray.fromObject(psort);

    }

   

    public FileInf read(String id) {

        SqlExec se = new SqlExec();

        String sql = String.format("select f_pid,f_pidRoot,f_pathSvr from up6_files where f_id='%s' union select f_pid,f_pidRoot,f_pathSvr from up6_folders where f_id='%s'", id,id);

        JSONArray data = se.exec("up6_files", sql, "f_pid,f_pidRoot,f_pathSvr","");

        JSONObject o = (JSONObject)data.get(0);

 

        FileInf file = new FileInf();

        file.id = id;

        file.pid = o.getString("f_pid").trim();

        file.pidRoot = o.getString("f_pidRoot").trim();

        file.pathSvr = o.getString("f_pathSvr").trim();

        return file;

    }

   

    public Boolean exist_same_file(String name,String pid)

    {

        SqlWhereMerge swm = new SqlWhereMerge();

        swm.equal("f_nameLoc", name.trim());

        swm.equal("f_pid", pid.trim());

        swm.equal("f_deleted", 0);

 

        String sql = String.format("select f_id from up6_files where %s ", swm.to_sql());

 

        SqlExec se = new SqlExec();

        JSONArray arr = se.exec("up6_files", sql, "f_id", "");

        return arr.size() > 0;

    }

   

    /**

     * 检查是否存在同名目录

     * @param name

     * @param pid

     * @return

     */

    public Boolean exist_same_folder(String name,String pid)

    {

        SqlWhereMerge swm = new SqlWhereMerge();

        swm.equal("f_nameLoc", name.trim());

        swm.equal("f_deleted", 0);

        swm.equal("LTRIM (f_pid)", pid.trim());

        String where = swm.to_sql();

 

        String sql = String.format("(select f_id from up6_files where %s ) union (select f_id from up6_folders where %s)", where,where);

 

        SqlExec se = new SqlExec();

        JSONArray fid = se.exec("up6_files", sql, "f_id", "");

        return fid.size() > 0;     

    }

   

    public Boolean rename_file_check(String newName,String pid)

    {

        SqlExec se = new SqlExec();           

        JSONArray res = se.select("up6_files"

            , "f_id"

            ,new SqlParam[] {

                new SqlParam("f_nameLoc",newName)

                ,new SqlParam("f_pid",pid)

            },"");

        return res.size() > 0;

    }

   

    public Boolean rename_folder_check(String newName, String pid)

    {

        SqlExec se = new SqlExec();

        JSONArray res = se.select("up6_folders"

            , "f_id"

            , new SqlParam[] {

                new SqlParam("f_nameLoc",newName)

                ,new SqlParam("f_pid",pid)

            },"");

        return res.size() > 0;

    }

 

    public void rename_file(String name,String id) {

        SqlExec se = new SqlExec();

        se.update("up6_files"

            , new SqlParam[] { new SqlParam("f_nameLoc", name) }

            , new SqlParam[] { new SqlParam("f_id", id) });

    }

   

    public void rename_folder(String name, String id, String pid) {

        SqlExec se = new SqlExec();

        se.update("up6_folders"

            , new SqlParam[] { new SqlParam("f_nameLoc", name) }

            , new SqlParam[] { new SqlParam("f_id", id) });

    }

}

 

1.在webuploader.js大概4880行代码左右,在动态生成的input组件的下面(也可以直接搜索input),增加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.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);

2.可以获取路径

     this.open_files = function (json)

     {

         for (var i = 0, l = json.files.length; i < l; ++i)

        {

             this.addFileLoc(json.files[i]);

         }

         setTimeout(function () { _this.PostFirst(); },500);

     };

     this.open_folders = function (json)

    {

        for (var i = 0, l = json.folders.length; i < l; ++i) {

            this.addFolderLoc(json.folders[i]);

        }

         setTimeout(function () { _this.PostFirst(); }, 500);

     };

     this.paste_files = function (json)

     {

         for (var i = 0, l = json.files.length; i < l; ++i)

         {

             this.addFileLoc(json.files[i]);

         }

     };

 

后端代码逻辑大部分是相同的,目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库,可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/java超大文件上传与下载/
 

可以入群一起讨论:374992201

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JQuery 是一个轻量级的 JavaScript 库,可以使用它来实现多层级文件夹的效果。 一种常见的实现方式是,使用 JQuery 的 hide() 和 show() 方法来控制文件夹的显示和隐藏。可以在文件夹的标题上添加一个点击事件,点击时显示或隐藏该文件夹下的所有子文件夹。 另外,也可以使用 JQuery 的 slideToggle() 方法来实现文件夹的折叠和展开效果。 需要注意的是, JQuery在中国国内访问速度可能较慢,可以使用国内镜像(如:http://libs.baidu.com/jquery/)或使用其他前端框架来实现同样的效果. ### 回答2: JQuery是一种流行的JavaScript库,被广泛用于前端开发。如果要实现多层级文件夹效果,可以通过JQuery的选择器和事件处理函数来操作DOM元素,实现文件夹的展开和折叠。 首先,可以为每个文件夹元素添加一个类名,用于统一选择这些元素。例如,可以为所有文件夹元素添加一个"folder"类。 然后,可以使用JQuery的事件处理函数来监听文件夹元素的点击事件。当某个文件夹被点击时,可以根据其当前的展开状态来切换展开和折叠的效果。 具体操作可以使用JQuery的toggleClass()方法来切换文件夹元素的展开状态。例如,可以为点击事件绑定一个函数,该函数内部使用toggleClass("open")来切换文件夹的展开和折叠状态。 除了展开和折叠的效果,还可以根据需要使用JQuery的其他功能来实现文件夹的拖拽、排序、重命名等功能。 总之,使用JQuery实现多层级文件夹可以轻松实现文件夹的展开和折叠效果,以及其他各种文件夹操作功能。通过合理运用JQuery的选择器和事件处理函数,可以使得用户在操作文件夹时更加方便和高效。 ### 回答3: JQuery是一个广泛使用的JavaScript库,它提供了许多便捷的方法和函数来操作DOM元素、处理事件、执行动画等。如果想要实现多层级文件夹的功能,可以使用JQuery来动态生成和管理文件夹结构。 首先,可以创建一个HTML结构,用来展示多层级文件夹的布局。可以使用ul和li标签来创建一个树状结构,其中每一个li代表一个文件夹。可以使用CSS样式来美化文件夹的展示效果。 接下来,可以使用JQuery的事件和方法来实现文件夹的交互功能。可以给文件夹添加点击事件,当文件夹被点击时,可以展开或者收起文件夹的子文件夹。可以使用JQuery的addClass和removeClass方法来动态改变文件夹的样式,实现展开和收起的效果。 同时,可以使用JQuery的ajax方法来实现文件夹内容的动态加载。可以在文件夹被点击时,发起一个ajax请求,获取该文件夹下的子文件夹或者文件的数据。可以根据返回的数据,动态生成子文件夹HTML结构,并添加到对应文件夹的子文件夹列表中。 另外,可以使用JQuery的事件委托机制来优化多层级文件夹的性能。可以给整个文件夹目录的父元素绑定点击事件,然后通过事件委托的方式来处理点击事件。通过这种方式,可以避免给每一个文件夹都绑定点击事件,提高交互效率。 综上所述,通过使用JQuery的事件、方法和ajax技术,可以实现多层级文件夹的功能。这些方法可以帮助我们动态生成文件夹结构、展开和收起文件夹以及加载文件夹内容,使得多层级文件夹的交互更加便捷、高效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值