使用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. 单例模式@Singleton在测试中的运用

    前言 单例模式是一种比较常用的设计模式,目的是:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 测试种可能用到的场景 : 在很多时候,有些对象我们希望在整个程序只有一个实例,如线程池.数据库连 ...

  2. TList TObjectList的区别和使用

    所在的单元 TList(Classes.pas) TObjectList(Contnrs.pas) TObjectList对象的创建方法有一个参数: constructor TObjectList.C ...

  3. RSTP生成树

    一.实验目的 二.实验拓扑图 三.实验编址 四.实验步骤 1.基本步骤 配置PC机IP 配置完成,开启所有设备,测试主机之间连通性 2.配置RSTP基本功能 在四台交换机上修改生成树模式:配置完成后, ...

  4. 关于array_merge()的注意

    array_merge() 函数把两个或多个数组合并为一个数组. 1 如果键名有重复,该键的键值为最后一个键名对应的值(后面的覆盖前面的). 2 如果数组是数字索引的,则键名会以连续方式重新索引. 2 ...

  5. Spring Boot开启的2种方式

    Spring Boot依赖 使用Spring Boot很简单,先添加基础依赖包,有以下两种方式 1. 继承spring-boot-starter-parent项目 <parent> < ...

  6. go中加号的用法

    // + 的用法 package main import "fmt" func main() { // 加号两端都是数字的话,做加法运算 var i = 1 var j = 1 v ...

  7. 【转载】Elasticsearch--java操作之QueryBuilders构建搜索Query

    原文地址:https://www.cnblogs.com/pypua/articles/9459941.html package com.elasticsearch; import org.elast ...

  8. RxJava总结（原）

    1.RxJava的作用 RxJava is a Java VM implementation of Reactive Extensions: a library for composing async ...

  9. 开源的android客户端，ghost网站

    https://github.com/TryGhost/Ghost-Android http://docs.ghostchina.com/zh/

  10. Spring 2.5配置文件详解（转）

    http://book.51cto.com/art/201004/193743.htm 6.2.3  Spring 2.5配置文件详解 Spring配置文件是用于指导Spring工厂进行Bean生产. ...