<!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. C++中的getopt的用法

    getopt的用法 getopt被用来解析命令行选项参数.就不用自己写东东处理argv了. 点击(此处)折叠或打开 #include <unistd.h> extern char *opt ...

  2. mvc4中 @Url.Action 如何读取javascript变量的值

    js中  function Search()  {     var businessDate = GetSelectedBusinessDate("#businessYear",  ...

  3. [Selenium]通过Selenium实现在当前浏览器窗口点击一个图标之后，弹出另外一个窗口，关闭这个窗口，再回到原来的窗口进行操作

    public void clickReportIcon(){ String initialWindowHandle = driver.getWindowHandle(); //保存原始的浏览器窗口 p ...

  4. LeetCode题解(14)--Longest Common Prefix

    https://leetcode.com/problems/longest-common-prefix/ 原题: Write a function to find the longest common ...

  5. sanic官方文档解析之路由

    1,路由,路由相当于一个网址的地址,来确定网址的位置和唯一性 当http://server.url/被允许访问服务器,当最后的"/"通过路由匹配到了业务逻辑处理的函数,将会返回一个 ...

  6. js appendChild 自带remove和append两个功能

    一提到appendChild ,我们就知道是在父节点上增加子节点. 经常使用到它就是动态增加一个元素,将其加入到指定的父节点下. 其实appendChild除了这个功能之外,他还有一个功能:如果子节点 ...

  7. (C)strcpy ,strncpy与strlcpy

    1. 背景 好多人已经知道利用strncpy替代strcpy来防止缓冲区越界. 但是如果还要考虑运行效率的话,也许strlcpy是一个更好的方式. 2. strcpy strcpy 是依据 /0 作为 ...

  8. codevs矩阵乘法系列

    T1:矩阵乘法板子题,练手. #include <map> #include <set> #include <cmath> #include <ctime&g ...

  9. OpenCV2.4.13+VS2012开发环境配置

    1.下载和安装OpenCV SDK 在OpenCV官网的下载页面: http://opencv.org/downloads.html   找到对应OpenCV for Windows版本下载.目前(2 ...

  10. SPOJ:Divisors of factorial (hard) (唯一分解&分块优化)

    Factorial numbers are getting big very soon, you'll have to compute the number of divisors of such h ...