使用js在页面上新建文件夹

	<!DOCTYPE html>

	<html lang="en">

	<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		body {

			margin: 0;

		}

		header {

			border-bottom: 2px solid #000;

			height: 40px;

			line-height: 40px;

			text-align: center;

		}

		.file {

			margin: 20px;

			float: left;

			position: relative;

			width: 100px;

			height: 110px;

			border-radius: 5px;

			border: 1px solid rgba(0, 0, 0, 0);

			background: url(img/file.png) no-repeat center 25px;

			cursor: pointer;

		}

		.file input {

			position: absolute;

			left: 3px;

			top: 3px;

			display: none;

		}

		.fileName {

			position: absolute;

			left: 5px;

			bottom: 10px;

			width: 90px;

			font: 12px/20px Arial, "宋体";

			text-align: center;

			white-space: nowrap;

			overflow: hidden;

			text-overflow: ellipsis;

		}

		.fileShow {

			border: 1px solid #000;

			background-color: #f1f1f1;

		}

		.fileShow input {

			display: block;

		}

		.info {

			position: fixed;

			left: 0;

			top: 0;

			width: 100%;

			height: 50px;

			font: 30px/50px "宋体";

			text-align: center;

			transform: translateY(-50px);

			background: #ccc;

		}

	</style>

	<!--

	contenteditable 使内容可以编辑

	-->

	<script type="text/javascript">

		window.onload = function() {

			var creat = document.querySelector('.creat');

			var del = document.querySelector('.del');

			var wrap = document.querySelector('.wrap');

			var info = document.querySelector('.info');

			var timer = 0;

			creat.onclick = function() {

				/* 创建元素，并添加事件 */

				var file = document.createElement('div');

				var fileName = getFileName();

				file.className = "file";

				file.innerHTML = '<input type="checkbox" name=""><span class="fileName" contenteditable>' + fileName + '</span>';

				var check = file.querySelector('input[type = "checkbox"]');

				var fileName = file.querySelector('.fileName');

				file.onmouseover = function() {

					this.className = "file fileShow";

				};

				file.onmouseout = function() {

					if(!check.checked) {

						this.className = "file";

					}

				};

				fileName.onblur = function() {

					if(this.innerHTML.trim() == "") {

						info.innerHTML = "请输入文件夹名字";

						info.style.transform = "translateY(0)";

						this.focus();

						clearTimeout(timer);

						timer = setTimeout(function() {

							info.style.transform = "translateY(-50px)";

						}, 2000);

						return;

					}

					var fileNames = document.querySelectorAll('.fileName');

					for(var i = 0; i < fileNames.length; i++) {

						if(this != fileNames[i] && this.innerHTML == fileNames[i].innerHTML) {

							info.innerHTML = "文件夹名字重名了，请重新输入";

							info.style.transform = "translateY(0)";

							this.focus();

							clearTimeout(timer);

							timer = setTimeout(function() {

								info.style.transform = "translateY(-50px)";

							}, 2000);

						}

					}

				};

				/*onkeydown 键盘按下 */

				fileName.onkeydown = function() {

					if(this.innerHTML == "请输入名字") {

						this.innerHTML = "";

					}

				}

				wrap.appendChild(file);

			};

			del.onclick = function() {

				/* 删除选中的元素 */

				var fileName = wrap.querySelectorAll('input:checked+.fileName');

				var input = wrap.getElementsByTagName("input")

				/* query方法只获取一次，dom修改了如果不重新获取，它是不会和dom同步的而get方法会时时和dom同步，dom改了get获取到的数据也会自定修改 */

				//console.log(fileName,input);

				for(var i = 0; i < fileName.length; i++) {

					wrap.removeChild(fileName[i].parentNode);

				}

				console.log(fileName);

			};

			// 获取文件夹名字

			/*

			创建文件夹名字并进行排序

			0 新建文件夹

			1 新建文件夹2

			2 新建文件夹3

			第一种情况：正常排序

			*/

			function getFileName() {

				var fileName = "新建文件夹";

				var fileNameLast = "";

				var fileNames = wrap.querySelectorAll('.fileName');

				if(fileNames.length == 0) { //当前一个都还没有也就是创建第0个

					return fileName;

				}

				// 当中间可能删除了几个

				/*

				由于中间会删除再添加，所以顺序会被打乱

				把所有的名字存入数组，然后进行排序

				*/

				var names = [];

				for(var i = 0; i < fileNames.length; i++) {

					names.push(fileNames[i].innerHTML);

				}

				names = names.filter(function(val) {

					var startName = val.substr(0, 5);

					if(startName != "新建文件夹") {

						return false; /*筛选掉不是已新建文件夹命名的*/

					}

					var lastName = val.substr(5);

					if(isNaN(lastName)) { /*筛选掉不是已新建文件夹跟随的不是数字的*/

						return false;

					}

					return true;

				});

				names.sort(function(a, b) {

					return a.substr(5) - b.substr(5);

				});

				console.log(names);

				for(var i = 0; i < names.length; i++) {

					if(names[0] != fileName) {

						return fileName;

					}

					if(i > 0 && names[i] != fileName + (i + 1)) {

						return fileName + (i + 1);

					}

				}

				//当前顺序向后排列 name 就等于在当前的个数上+1

				fileNameLast = names.length + 1;

				fileName += fileNameLast;

				return fileName;

				}

			};

		</script>

		</head>

	<body>

		<div class="info"></div>

		<header>

		<input type="button" value="新建文件夹" class="creat" />

		<input type="button" value="删除文件夹" class="del" />

		</header>

		<div class="wrap">

		<!-- <div class="file fileShow">

	<input type="checkbox" name="">

	<span class="fileName">新建文件夹新建文件夹</span>

	</div> -->

			</div>

		</body>

	</html>

使用js在页面上新建文件夹的更多相关文章

  1. 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  2. Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹

    功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. ...

  3. js能否上传文件夹

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  4. web前端:上传文件夹(需支持多浏览器)

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  5. Nodejs学习笔记（八）--- Node.js + Express 实现上传文件功能（felixge/node-formidable）

    目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...

  6. Nodejs学习笔记（八）—Node.js + Express 实现上传文件功能（felixge/node-formidable）

    前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...

  7. 基于Ubuntu Server 16.04 LTS版本安装和部署Django之（三）：设置上传文件夹权限（这里测试用完全共享）

    基于Ubuntu Server 16.04 LTS版本安装和部署Django之(一):安装Python3-pip和Django 基于Ubuntu Server 16.04 LTS版本安装和部署Djan ...

  8. javaweb上传文件夹

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...

  9. java+上传+文件夹

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素:   1.表单提交方式:post (get方式提交有 ...

随机推荐

  1. MySQL中truncate误操作后的数据恢复案例

    MySQL中truncate误操作后的数据恢复案例 这篇文章主要介绍了MySQL中truncate误操作后的数据恢复案例,主要是要从日志中定位到truncate操作的地方然后备份之前丢失的数据,需要的 ...

  2. JS 替换

    JS 字符串有replace() 方法.但这个方法只会对匹配到的第一个字串替换. 如下例: var str = "wordwordwordword"; var strNew = s ...

  3. I2C总线协议详解

    I2C总线定义     I2C(Inter-Integrated Circuit)总线是一种由PHILIPS公司开发的两线式串行总线,用于连接微控制器及其外围设备.I2C总线产生于在80年代,最初为音 ...

  4. 测开之路十六：@classmethod与@staticmethod

    @classmethod 类方法 和属性一样,所有实例化的对象都共享类方法 @staticmethod 静态方法,可以理解为和类没有任何关系,只是放在了类里面 参数可以任意定义,根据自己的定义传参,也 ...

  5. drf：restful概念,类继承关系,drf请求封装,drf请求流程,版本控制组件,认证组件(token),权限组件

    1.restful规范 resfful规范的概念最重要: 是一套规范,规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的就是,以前写增删改查的时候需要些四个视图寒素,rest ...

  6. Linux下MySQL 命令导入导出sql文件

    导出数据库 直接使用命令: mysqldump -u root -p database >database.sql 然后回车输入密码就可以了: mysqldump -u 数据库链接用户名 -p ...

  7. QT pro文件的一种通用配置

    #设置UI文件目录 UI_DIR = ./ui CONFIG(debug, debug|release) {   #设置debug配置下编译生成文件的路径 TARGET = $$join(TARGET ...

  8. python面试题之有没有一个工具可以帮助查找python的bug和进行静态的代码分析？

    pycheck pylint 本文首发于python黑洞网,博客园同步更新

  9. struts2之ModelDriven

    在Struts 2中,提供了另外一种直接使用领域对象的方式,就是让action实现com.opensymphony. xwork2.ModelDriven接口.ModelDriven让你可以直接操作应 ...

  10. Centos7 安装vscode

    1.官网下载vscode https://vscode.cdn.azure.cn/stable/0f3794b38477eea13fb47fbe15a42798e6129338/code-1.36.0 ...