<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			#dropbox {

				width: 300px;

				height: 300px;

				background: #ffffff;

				border:5px dashed #FF0000;

				text-align: center;

				line-height: 300px;

			}

		</style>

	</head>

	<body>

		<div id="dropbox">

			请把文件拖放到此区域

		</div>

		<div id="div1">

			<!--显示文件的信息-->

		</div>

		<script>

			//获得dom对象

			var dropbox = document.getElementById('dropbox');

			var div1 = document.getElementById('div1');

			//拖动进入

			dropbox.ondragenter = function(e) {

				console.log('dropbox dragenter');

				e.preventDefault();

				e.stopPropagation();

				//区域高亮

				this.style.background = 'yellow';

			}

			//拖动离开

			dropbox.ondragleave = function(e) {

				console.log('dropbox dragleave');

				e.preventDefault();

				e.stopPropagation();

				//区域失去高亮

				this.style.background = 'white';

			}

			//拖动悬停

			dropbox.ondragover = function(e) {

				console.log('dropbox dragover');

				e.preventDefault();

				e.stopPropagation();

			}

			//释放元素

			dropbox.ondrop = function(e) {

				console.log('dropbox drop');

				e.preventDefault();

				e.stopPropagation();

				//从e.dataTransfer对象中获得文件列表对象

				var files = e.dataTransfer.files;

				var html = [];

				//遍历文件列表

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

					//获得当前文件对象

					var f = files[i];

					//读取文件信息拼接字符串放到数组中

					html.push('<p>' + f.name + ',' + (f.type||'未知类型') + ',' + f.size + '字节</p>');

				}

				//在div1中显示文件信息

				div1.innerHTML = html.join('');

			}

		</script>

	</body>

</html>

　　

h5-20-文件操作-拖放文件的更多相关文章

  1. Java IO,io,文件操作,删除文件，删除文件夹，获取文件父级目录

    Java IO,io,文件操作,删除文件,删除文件夹,获取文件父级目录 这里先简单的贴下常用的方法: File.separator //当前系统文件分隔符 File.pathSeparator // ...

  2. C++ 学习笔记之——文件操作和文件流

    1. 文件的概念 对于用户来说,常用到的文件有两大类:程序文件和数据文件.而根据文件中数据的组织方式,则可以将文件分为 ASCII 文件和二进制文件. ASCII 文件,又称字符文件或者文本文件,它的 ...

  3. Python文件操作：文件的打开关闭读取写入

    Python文件操作:文件的打开关闭读取写入 一.文件的打开关闭 Python能以文本和二进制两种方式处理文件,本文主要讨论在Python3中文本文件的操作. 文件操作都分为以下几个步骤: 1.打开文 ...

  4. s14 第5天 时间模块 随机模块 String模块 shutil模块（文件操作） 文件压缩（zipfile和tarfile）shelve模块 XML模块 ConfigParser配置文件操作模块 hashlib散列模块 Subprocess模块（调用shell） logging模块 正则表达式模块 r字符串和转译

    时间模块 time datatime time.clock(2.7) time.process_time(3.3) 测量处理器运算时间,不包括sleep时间 time.altzone 返回与UTC时间 ...

  5. AIR文件操作:使用文件对象操作文件和目录 .

    来源:http://blog.csdn.net/zdingxin/article/details/6635376 在AIR中可以方便的对本地文件操作,不过上次做了个项目,发现还是有不少不方便的地方,比 ...

  6. Linux下的文件操作——基于文件描述符的文件操作(2)

    文件描述符的复制 MMAP文件映射 ftruncate修改文件大小 文件描述符的复制 ​ 系统调用函数dup和dup2可以实现文件描述符的复制,经常用来重定向进程的stdin(0), stdout(1 ...

  7. php 文件操作和文件上传

    文件操作 http://www.w3school.com.cn/php/php_file.asp http://www.w3school.com.cn/php/php_file_open.asp ht ...

  8. linux常用命令之------文件操作、文件查看、权限、打包压缩

    1.一般公司把linux作为自己的应用服务器,将应用和服务器部署在上面 2.测试一般用来打包.压缩.查日志,写一个简单的shell 获得linux服务器的方式 a:网上租一台云服务器 b:安装vmwa ...

  9. php课程---文件操作及文件上传的代码总结

    php里面文件包含目录和文件两种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  10. 总结文件操作函数-文件夹（三）-C语言

    获取.改变当前文件夹: 原型为: #include <unistd.h>   //头文件 char *getcwd(char *buf, size_t size); //获取当前文件夹.相 ...

随机推荐

  1. Django之cookie 和 session

    一. 1.cookie的由来!!! 由于HTTP协议是无状态的,既每一次的请求都是独立的,他不会因为你之前来过,就记住你,所以每次浏览器去访问服务器的时候,都是一个全新的过程,之前的数据也不会保留,所 ...

  2. SQL Server 2012 安装图解教程(附sql2012下载地址)

    在安装微软最新数据库SQL Server 2012之前,编者先确定一下安装环境:Windonws 7 SP1,32位操作系统.CPU是2.1GHz赛扬双核T3500,内存2.93GB. sql2012 ...

  3. Hive 特性及原理

    特点:Hive是构建在hadoop之上的数据仓库.数据存储在hdfs上,数据计算用的mapreduce框架.用户无需掌握MR的编写,通过类SQL语句即可自动生成查询计划. 主要内容:     接入入口 ...

  4. FZU1901 Period II —— KMP next数组

    题目链接:https://vjudge.net/problem/FZU-1901  Problem 1901 Period II Accept: 575    Submit: 1495Time Lim ...

  5. YTU 2457: 很简单的一道题

    2457: 很简单的一道题 时间限制: 1 Sec  内存限制: 128 MB 提交: 261  解决: 80 [提交][状态][讨论版] 题目描述 有一个简单的函数数学公式,如下 输入 重复输入多组 ...

  6. Navicat——如何导出所有的查询数据

    前言 很简单就是通过Navicat的查询来查询~ 步骤 真的不要太简单了~ 打开Navicat并点击查询 新建查询 选择对应的连接和库 写入SQL并运行 导出结果 1.选择导出当前的结果 2.选择保存 ...

  7. html5--6-3 CSS语法2

    html5--6-3 CSS语法2 实例 div包含p和h标签的时候可以,但是p标签包含h标签的时候不可以  学习要点 掌握引入外部样式表方法 插入样式的三种方法 内联样式表(行内) 内部样式表(st ...

  8. Quartz 2D（常用API函数、绘制图形、点线模式）

    Quzrtz 2D 绘图的核心 API 是 CGContextRef ,它专门用于绘制各种图形. 绘制图形关键是两步: 1.获取 CGContextRef ; 2.调用 CGContextRef 的方 ...

  9. 在idea中创建maven父子工程，子工程无法导入父工程依赖的问题

    创建maven父子工程时遇到一个问题,当子工程的名称前缀和父工程的名称一样时,子工程会出现一系列的问题.比如我的父工程名称是microservicecloud,子工程名称是microservicecl ...

  10. web前端安全机制问题全解析

    摘要 web前端安全方面技术含有的东西较多,这里就来理一理web安全方面所涉及的一些问题 目录[-] 摘要 web前端安全方面技术含有的东西较多,这里就来理一理web安全方面所涉及的一些问题 web安 ...