使用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. Visual Studio Code - 调试 Node.js 代码

    官方的文档写的太好了!大家还是看参考资料吧. 参考资料: Debugging in Visual Studio Code Debug Node.js Apps using Visual Studio ...

  2. Windwos 08R2_DNS全面图文详解

    目录 目录 前言 软件环境 DNS域名服务器 DNS服务器原理 DNS域名空间 DNS区域 DNS服务器的类别 DNS查询模式 缓存文件 配置DNS服务器 DNS服务的应用 创建DNS正向解析区域 在 ...

  3. write(byte[] b, int off, int len)

    write(byte[] b, int off, int len)就是将数组 b 中的 len 个字节按顺序写入输出流. 所以如果 b 为 null,则抛出 NullPointerException. ...

  4. CET-6 分频周计划生词筛选（Week 2）

    点我阅读 Week 2 2016.09.04/05 p58 ongoing / forward p59 prosperity p60 rear p61 rival + segregation + se ...

  5. Flask Session ，pymysql ，wtforms组件 虚拟virtualenv venv

    https://www.cnblogs.com/wupeiqi/articles/5713330.html session def create_app(): print() app=Flask(__ ...

  6. How many groups(DP)

    题意: 定义:设M为数组a的子集(元素可以重复),将M中的元素排序,若排序后的相邻两元素相差不超过2,则M为a中的一个块,块的大小为块中的元素个数 给出长度为n的数组a,1<=n<=200 ...

  7. C语言|博客作业4

    一.本周教学内容:用C语言编写程序-循环结构 2.4 输出华氏-摄氏温度转换表.要求学生掌握使用for循环语句实现指定次数的循环程序设计. 二.本周作业头 问题 答案 这个作业属于哪个内容 C语言程序 ...

  8. C语言深度剖析自测题8解析

    #include <stdio.h> int  main(void) {    int  a[5] = {1, 2, 3, 4, 5}; int* ptr1 = (int*)(&a ...

  9. Linux Kernel中所應用的數據結構及演算法

    Linux Kernel中所應用的數據結構及演算法 Basic Data Structures and Algorithms in the Linux kernel Links are to the  ...

  10. HDU多校训练第一场 1012 Sequence

    题目链接:acm.hdu.edu.cn/showproblem.php?pid=6589 题意:给出一个长度为n的数组,有m次操作,操作有3种1,2,3,问操作m次后的数组,输出i*a[i]的异或和 ...