使用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. JS 替换

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

  2. (子文章)Spring Boot搭建两个微服务模块

    目录 1. 创建工程和user-service模块 1.1 创建空工程 1.2 在空工程里新建Module 2. 配置文件 2.1 pom.xml 2.2 application.yml 3. 代码 ...

  3. git开发实战：认识git

    git简介: git是分布式版本控制系统,相比较svn相比,git会在本地保存完整的提交记录,即使远程服务器宕机数据消失,可以将本地分支提交到远程服务器,本地分支会保存完整的记录.只要文件提交到git ...

  4. cabal替代脚本

    由于网络原因,直接使用cabal update不成功,只能自己写脚本直接从网上拖包下来,自己安装. 但是这样做的缺点是需要手动处理dependency,当然,也可以把脚本写的复杂些,自动来处理depe ...

  5. docker 实战

    创建镜像 docker pull ubuntu 创建容器 docker run -it -name web ubuntu /bin/bash 更新软件源信息 apt-get update 安装ssh  ...

  6. Oracle学习笔记<3>

    单值函数 1.函数的分类 Oracle数据库中函数分为两类: 1)单值函数 n条数据经过函数处理得到n条结果 例如:查询所有员工last_name,并以全部大写形式输出 2)多值函数(组函数) n条数 ...

  7. luoguP1314 聪明的质监员 题解(NOIP2011)

    P1314 聪明的质监员 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include< ...

  8. 使用vue的extend自定义组件开发

    index.js import Vue from 'vue' import tip from './tip.vue' const Constructor = Vue.extend(tip); cons ...

  9. ubantu18.04中mysql8.0设置远程连接的问题

    在mysql8.0中的配置文件中默认是没有绑定地址的,但是可以自己配置,在my.cnf中 这里使用另一种方式: 首先先连接到自己的数据库执行: use mysql; select host,user ...

  10. 数据库并发及锁机制及Hibernate锁实现

    数据库事务的定义 数据库事务(Database Transaction),是指作为单个逻辑工作单元执行的一系列操作.一个逻辑工作单元要成为事务,必须满足所谓的ACID(原子性.一致性.隔离性和持久性) ...