使用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. QTP使用dictionary 对象

    1. 创建即使用Dictionary对象 ' 创建Dictionary对象Set Dic = CreateObject("Scripting.Dictionary")' 添加Dic ...

  2. Oracle 11g Compound Trigger

    Original Link In Oracle 11g, the concept of compound trigger was introduced. A compound trigger is a ...

  3. 为GitLab帐号添加SSH keys并连接GitLab

    https://blog.csdn.net/xyzchenxiaolin/article/details/51852333 为github帐号添加SSH keys使用git clone命令从GitLa ...

  4. 常用命令--find

    语法 find path -option [ -print ] [-exec -ok command ] {} \; find . -maxdepth 1 -type f -exec mv {} /t ...

  5. bash 中的特殊变量

    bash 中的特殊变量 变量 说明 ------------------------------------ $0 当前脚本的文件名 $n 第n个位置参数 $* 传递给脚本或函数的所有参数,$*会将这 ...

  6. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  7. 35.Unique Paths（不同的路径）

    Level:   Medium 题目描述:   A robot is located at the top-left corner of a m x n grid (marked 'Start' in ...

  8. form 表单的name

    form 中 的name 很重要, 1. 可以用来查找对应的input 2.form 提交之后 会用来作为参数列表的名字 3.enovia plm 中,name 会和 table 的field 进行对 ...

  9. 记录pgsql数据库表设计date和time字段的处理

    pgsql表设计中,有时候涉及到日期和时间字段需要分别处理的情况,这个时候可以使用date和time字段分别定义两个字段的属性 对应的实体类可以使用LocalDate和LocalTime去做映射 环境 ...

  10. maven3常用命令、java项目搭建、web项目搭建详细图解（转）

     转自:http://blog.csdn.net/edward0830ly/article/details/8748986 maven3常用命令.java项目搭建.web项目搭建详细图解 2013-0 ...