jquery 文件管理

工作需求，写了个简单的文件管理界面，基于jquery，还有很大一部分没有完善，需要的朋友自己完善吧。本人只是小菜鸟，有什么好的想法或者建议都可以交流，彼此学习。

先看下最后的结果吧，粗略的放两张图：

新建文件夹：

修改文件夹名：

其它的话就不多说了，大多数的意思都在备注里面，也比较简单，直接上代码吧：

测试主页代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/fileManager.css"/><script type="text/javascript" src="js/jquery-2.2.1.min.js"></script><script type="text/javascript" src="js/fileManager.js"></script>
</head>
<body></body><div class="fileContent" id="testFileContent"></div>
</html>
<script>$("#testFileContent").initFileManager({"fileHead":false,"contentMenu":[{"text":"新建文件夹","code":"1",//1非文件夹右键菜单//2文件夹右键菜单"func":function(){createFile("testFileContent");}}]});/*初始化参数参数        默认值                                        作用fileHead       true                           是否显示文件管理的头部操作按钮（比较简单，更具需求可以自己扩展）contentMenu     新建，删除，修改文件名         text:右键菜单显示的文本，code右键类型，func:点击执行方法*/
</script>

css样式文件代码：

body{margin:0px;padding: 0px;
}
.fileContent{width: 100%;height: 100%;float: left;border-style: solid;border-width: thin;border-color: red;
}
/*文件操作头*/
.fileHeader{width:100%;}
/*文件操作按钮*/
.fileHeader button{width:100px;height:30px;margin: 10px;border:none;border-radius: 2px;font-size: 15px;background-color: #3399FF ;color: white;
}
/*分割线*/
.fileDivision{border-style: solid;border-width: thin;
}
/*文件列表 ul*/
.fileList{padding:0px;list-style: none;
}
.fileContentDiv{float: left;
}
/*文件夹*/
.fileList li{overflow: hidden;width: 100px;height: 150px;float:left;margin-left:55px;background:url(../images/file.png) center top no-repeat;border:1px solid #fff;position:relative;transition:all 0.1s ease-in 0.1s;
}
/*鼠标移动到文件上面的时候*/
.fileList li:hover{background:url(../images/file.png) center top no-repeat #f1f2fd;border:1px solid #a7aae3;
}
/*文件中的div，也就是文件创建完之后的文件名显示的div*/
.fileList li div{position: relative;top:85px;text-align: center;
}
/*创建文件时候创建的输入文本*/
.cleateInputFile{width:90px;position: relative;top:85px;text-align: center;
}
.fileList .selectFile{background:url(../images/file.png) center top no-repeat #f1f2fd;border:1px solid #a7aae3;
}
.menuDiv{position: relative;background-color: #CCCCCC;width: 150px;height: 100px;
}
.menuDiv ul{position: absolute;list-style: none;margin: 0px;padding: 0px;}
.menuDiv ul li{width: 150px;text-align: center;height: 30px;border-bottom: dashed;border-width: thin;line-height: 30px;cursor: pointer;
}
.menuDiv ul li:hover{background-color: #66CCFF ;
}

js脚本代码：

/*** Created by 周荥马 on 2016/05/26.*/
$.fn.extend({initFileManager:function(opt){if ( typeof opt != "object" ) {alert('参数错误!');return;}var fileManagerId = $(this).attr("id");$.each(getInitFileManagerOption(fileManagerId),function(key,value){if(opt[key]==null){opt[key] = value;}else if(key == "contentMenu"){opt[key]=$.merge(value,opt[key]);}});$("#"+fileManagerId).data("fileManagerOpt",opt);initWithConment(fileManagerId);setClickObjectMessage(fileManagerId);}
});function getInitFileManagerOption(fileManagerId){var initOption={"fileManagerId":fileManagerId,"fileHead":true,"contentMenu":[{"text":"新建","code":"1",//非文件夹右键菜单"func":function(){createFile(fileManagerId);}},{"text":"删除","code":"2",//文件夹右键菜单"func":function(){deleteFile(fileManagerId);}},{"text":"重命名","code":"2","func":function(){chengeFileName(fileManagerId);}}]};return initOption;
}function initWithConment(fileManagerId){var initContentDiv = "";var opt = $("#"+fileManagerId).data("fileManagerOpt");if(opt.fileHead) {initContentDiv += "<div class='fileHeader'>";initContentDiv += "<button οnclick=createFile('"+fileManagerId+"')>创建文件夹</button><button οnclick=removeAllFile('"+fileManagerId+"')>清空文件夹</button><button οnclick=deleteFile('"+fileManagerId+"')>删除文件夹</button>";initContentDiv += "</div>";initContentDiv += " <div class='fileDivision'></div>";}initContentDiv+="<div class='fileContentDiv'>";initContentDiv+="<ul class='fileList'>";//下面这两句仅仅测试，删除就好initContentDiv+="<li><div>新建文件夹1</div></li>";initContentDiv+="<li><div>新建文件夹2新建</div></li>";initContentDiv+=" </ul>";initContentDiv+="</div>";$("#"+fileManagerId).append(initContentDiv);
}/*** zxm* 作用:创建文件*/
function createFile(fileManagerId){//还需要添加写入数据库的代码$(".fileList").append("<li><input type='text' class='cleateInputFile' value='新建文件夹' autofocus='autofocus'  οnfοcus='this.select()' οnblur='fileNameSuccess(this)'></li>")setClickObjectMessage(fileManagerId);
}
/*失去焦点，也就是文件名输入成功的时候*/
function fileNameSuccess(obj){var parentObj=$(obj).parent();var objValue = $(obj).val();if(objValue==""||objValue==null){alert("文件名不能为空");$(obj).focus();return;}$(obj).remove();$(parentObj).append("<div>"+objValue+"</div>")
}
/*** zxm* 作用:设置文件点击事件* @param fileManagerId 文件管理的根路径*/
function setClickObjectMessage(fileManagerId){//文件上的点击事件$("#"+fileManagerId+" .fileContentDiv .fileList li").mousedown(function(e){var clickObj = $("#"+fileManagerId).data("clickObj");$(this).on('contextmenu', function(){return false; //设置返回为false，设置为true则返回右键菜单，大家可以自己修改代码试试});if(e.which==3){//右键点击if(clickObj!=null){$(clickObj).removeClass("selectFile");}$(this).addClass("selectFile");clickObj = this;$("#"+fileManagerId).data("clickObj",clickObj);var position = {"X": e.clientX,"Y": e.clientY}initWithConmentMenu(fileManagerId,position,"2");}else if(e.which==1){//左键点击if(clickObj!=null){$(clickObj).removeClass("selectFile");}$(this).addClass("selectFile");clickObj = this;$("#"+fileManagerId).data("clickObj",clickObj);}});//文件外空白的点击事件$(".fileContent:not(li)").mousedown(function(e){var isFile = false;if(e.which==1) {if($(e.target).attr('class')!="menu") {removeMenu(fileManagerId);}}if(e.which==3) {if($(e.target).attr('class')!="selectFile"){$(this).on('contextmenu', function(){return false; //设置返回为false，设置为true则返回右键菜单，大家可以自己修改代码试试});var position = {"X": e.clientX,"Y": e.clientY}initWithConmentMenu(fileManagerId,position,"1");}}});
}
/*** zxm* 作用：删除文件* @param fileManagerId*/
function deleteFile(fileManagerId){if(confirm("确认要删除？")){var clickObj = $("#" + fileManagerId).data("clickObj");if (clickObj != null) {$(clickObj).remove();} else {alert("没有选择的文件，请选择要删除的文件！");}}
}
/*** zxm* 作用：移除所有的文件* @param fileManagerId*/
function removeAllFile(fileManagerId){$("#"+fileManagerId +" .fileList").html("");
}
/*** zxm* 作用：初始化右键菜单* @param fileManagerId*/
function initWithConmentMenu(fileManagerId,position,code){//alert(position.X+","+position.Y);var menuLiNimber = 0;var opt = $("#"+fileManagerId).data("fileManagerOpt");removeMenu(fileManagerId);var menuData ="";menuData+="<div class='menuDiv' id='"+fileManagerId+"_menuDiv'>";menuData+="<ul>";for(var i = 0; i<opt.contentMenu.length;i++){if(code==opt.contentMenu[i].code) {menuLiNimber++;menuData += "<li class='menu' οnclick= dofuntionWithMenu('"+fileManagerId+"','"+i+"')>"+opt.contentMenu[i].text+"</li>"}}menuData+="</ul>";menuData+="</div>";$("#"+fileManagerId).append(menuData);var X = position.X+10;var Y=0;if(opt.fileHead) {Y = position.Y - 60;}else{Y = position.Y;}$("#"+fileManagerId+"_menuDiv").css({"top":Y,"left":X});var height = menuLiNimber*30;$("#"+fileManagerId+"_menuDiv").css("height",height);}
/*** zxm* 作用：移除菜单* @param fileManagerId 文件管理id*/
function removeMenu(fileManagerId){var menuObj =  $("#"+fileManagerId+"_menuDiv");if(menuObj!=null){menuObj.remove();}
}
/*** zxm* 作用：执行menu中的方法函数* @param fileManagerId 文件管理id* @param menuContentId 菜单所在的位置*/
function dofuntionWithMenu(fileManagerId,menuContentId){var opt = $("#"+fileManagerId).data("fileManagerOpt");removeMenu(fileManagerId);opt.contentMenu[menuContentId].func();}
/*** zxm* 作用：更改文件名* @param fileManagerId 文件管理id*/
function chengeFileName(fileManagerId){var clickObj = $("#"+fileManagerId).data("clickObj");if(clickObj!=null){var divValue =  $(clickObj).children("div").html();$(clickObj).children("div").remove();$(clickObj).append("<input type='text' class='cleateInputFile' value='"+divValue+"' autofocus='autofocus'  οnfοcus='this.select()' οnblur='fileNameSuccess(this)'>");}else{alert("没有选择的文件，请选择要修改文件名的文件！");}removeMenu(fileManagerId);
}

程序已经打包在百度网盘上：http://pan.baidu.com/s/1eSCvJe6

jquery 文件管理相关推荐

jquery 打开服务器文件管理,javascript - 前端js如何封装一个方法或者是jQuery的插件实现点击一个按钮打开本地文件管理系统，进行上传文件...
世界只因有你2017-05-16 13:38:563楼前段时间封装的一个方法,使用ajax和formData方法,实现文件上传,在上传的过程中显示上传进度 js $('#upload').on('c ...
从零开始学习jQuery (八) 插播:jQuery实施方案
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
Web文件管理器 elfinder-彩龙社区
最近接到一个需求,客户需要能在web页面进行文件管理,在需求调研时发现一个很好用的开源web文件管理器插件 elfinder,功能比较完善,社区也很活跃,方便二次开发,源码在GitHub上有将近3K的 ...
jquery文件上传插件uploadify 讲解
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.名词解释: tracker服务器:中文叫做跟踪器,主要做调度工作,在访问上起负载均衡的作用.(t ...
vestacp 远程mysql_免费使用VestaCP控制面板的文件管理器 | 雷雨博客
VestaCP是由俄罗斯人编写的免费虚拟主机控制面板,该面板功能强大,即可自用也可对接WHMCS销售.不过面板并不支持免费的文件管理,官网的商业项目为 "File Manager" ...
2016十大优秀jQuery插件推荐
当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时,jQuery可以扩展你的视野.本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件. 1. jQuery ...
jQuery框架学习第八天：ASP.NET jQuery实施方案
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
ajax提交数据给谁,jquery ajax提交数据给后端
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...
[转帖]jQuery框架学习第八天：ASP.NET jQuery实施方案
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章属于临时插播, 用于介绍我在本公司的j ...

jquery 文件管理

jquery 文件管理相关推荐

最新文章

热门文章