<!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. 读写ini配置文件 .

    ini文件的第一行不能是有效内容(不能为section),否则读出键值为空. INI文件是一个无固定标准格式的设置档.它以简单的文字与简单的结构组成,常常使用在视窗操作系统,或是其他操作系统上,许多程 ...

  2. group by where having 联合使用

    having子句与where有相似之处但也有区别,都是设定条件的语句.在查询过程中聚合语句(sum,min,max,avg,count)要比having子句优先执行.而where子句在查询过程中执行优 ...

  3. C++，Base64编解码字符串或文件

    参考链接:在C语言中使用libb64进行Base64编解码 GitHub地址:https://github.com/BuYishi/cpp_base64_demo base64_demo.cpp #i ...

  4. JAVA 0 的突破

    使用IntelliJ Idea 开发的一个Java 处理数据文件折行的问题,整体来说功能比较简单的一个java脚本的开发,跨平台的优势可以处理windows和lunix平台的文件折行 package ...

  5. Codeforces Round #Pi (Div. 2) C. Geometric Progression

    C. Geometric Progression time limit per test 1 second memory limit per test 256 megabytes input stan ...

  6. RedisCluster集群搭建

    搭建集群方案 安装部署任何一个应用其实都很简单,只要安装步骤一步一步来就行了.下面说一下 Redis 集群搭建规划,由于集群至少需要6个节点(3主3从模式),所以,没有这么多机器给我玩,我本地也起不了 ...

  7. 在织梦dedecms中实现“文章标题-栏目名称-网站名”导航

    本文介绍了在dedecms中,实现文章标题-栏目名称-网站名 导航的方法,有需要的朋友参考下. 在dedecms中实现“文章标题-栏目名称-网站名”导航的方法.   第一种: 在/include/in ...

  8. 教你开发jQuery插件

    jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. 根据<jQuery高级编程&g ...

  9. Oracle:ORA-01790: expression must have same datatype as corresponding expression

    今天有现场报sql错误,错误sql语句 类似  select * from  tableA  where (exists  条件A   or exists 条件B), 单独执行  select * f ...

  10. hadoop源码剖析--$HADOOP_HOME/bin/hadoop脚本文件分析

    1. $HADOOP_HOME/bin/ hadoop #!/usr/bin/env bash# Licensed to the Apache Software Foundation (ASF) un ...