<!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. 2016/06/02 网摘记录 svn 服务器端 客户端 安装使用

    http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2408089.html http://www.cnblogs.com/xiaobaihom ...

  2. 直播：中国HBase技术社区第一届MeetUp

    6月6日,由中国HBase技术社区组织,阿里云主办的中国第一届HBase Meetup将在北京举行,来自阿里.小米.滴滴.360等公司的各位大神会共同探讨HBase2.0的技术革新,HBase在国内各 ...

  3. 在线安装Ganglia3.6.0，nginx+php搭建gweb，绝对通过

    环境:CentOS6.5 minimal 目标:安装Ganglia核心组件(gmond, gmetad, gmetric, gstat, libganglia).Ganglia web 准备 yum增 ...

  4. Hadoop MapReduce基本原理

    一.什么是: MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(归约)",是它们的主要思想,都 ...

  5. spring、spring MVC、spring Boot

    Spring 是一个“引擎” Spring MVC 是基于 Spring 的一个 MVC 框架 Spring Boot 是基于 Spring4 的条件注册的一套快速开发整合包 Spring 最初利用“ ...

  6. futimens函数的使用【学习笔记】

    #include "apue.h" #include <fcntl.h> int main(int argc,char *argv[]) { int i,fd; str ...

  7. sed替换变量

    今天在写脚本时用到了sed,我用sed替换xml文件中的变量.一般在sed 中替换都用单引号,如下边 sed -i ‘s/10/1000/g’ test.xml但是如果需要把1000改成变量,如sed ...

  8. Opencv实现简易播放器

    实现了在MFC中显示图片,再要显示一个视频就是轻而易举的事了,本篇介绍使用Opencv制作一个简易的播放器,实现打开文件.暂停.继续播放.再次播放和总\当前帧数显示功能. 首先还是先看一下界面效果: ...

  9. 换行和flush()

    在尝试使用BufferedReader的readLine方法读出每一行数据,再用FileWriter依次写到文件里的时候,用了下面的代码段: fr = new FileReader("c:/ ...

  10. SPOJ：Harbinger vs Sciencepal（分配问题&不错的DP&bitset优化）

    Rainbow 6 is a very popular game in colleges. There are 2 teams, each having some members and the 2 ...