<!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. SpringInAction4笔记——web

    1,java配置 extends AbstractAnnotationConfigDispatcherServletInitializer public class SpitterWebInitial ...

  2. ICMP协议 广播以查询局域网内的所有主机

    看到了很多局域网内的主机扫描工具,在想怎么去实现这样一个工具.前几天看了Ping源码--ICMP协议的实例,ICMP可以用来探测网联网内的任一主机,ICMP和广播地址结合来扫描局域网内的所有主机不是很 ...

  3. 数据库的事务与ACID

    一.事务: 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit).在计算机术语中,事务通常就是指数据库事务. 二 ...

  4. POJ3660 Cow Contest —— Floyd 传递闭包

    题目链接:http://poj.org/problem?id=3660 Cow Contest Time Limit: 1000MS   Memory Limit: 65536K Total Subm ...

  5. python读取一个英文文件，并记录每个单词出现的次数，降序输出

    对文中出现的句号,逗号和感叹号做了相应的处理 sorted排序函数用法: 按照value值降序排列: sorted(dict.items(),key=lambda k:k[1],reverse=Tru ...

  6. Silverlight DataBinding Converter：根据binding对象调整显示

    Silverlight DataBinding Converter:根据binding对象调整显示 我希望写一系列关于Silverlight DataBinding的文章,分别讲解Silverligh ...

  7. Oracle10G各版本下载以及补丁地址

    Oracle Database 10g Release 2 (10.2.0.1.0) Enterprise/Standard Edition for Microsoft Windows (32-bit ...

  8. Java泛型和反射总结

    A a = (A)Class.forName(“pacage.A”).newInstance(); 这和你 A a = new A(): 是一样的效果. String className = “Exa ...

  9. CTR预估经典模型总结

    计算广告领域中数据特点:    1 正负样本不平衡    2 大量id类特征,高维,多领域(一个类别型特征就是一个field,比如上面的Weekday.Gender.City这是三个field),稀疏 ...

  10. 浅谈getAttribute兼容性

    最近终于证实tag.setAttribute("style", "color:#000;");在IE7中不起作用.于是百度了一些解决办法. IE的setAttr ...