HTML5标准中的提供的用于文件输入输出(I/O)的对象
 File:                       代表一个文件对象
 FileList:                   代表一个文件列表，类数组对象
 FileReader                  用于从文件中提取内容
 FileWrite                   用于向文件中写入类容

这些对象需要在 H5的拖拽事件中通过 e.dataTransfer  来访问和获取

完成效果如下：

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #container {

            border: 1px solid #aaa;

            padding: 10px;

            margin: 10px;

            width: 1050px;

            min-height: 300px;

        }

    </style>

</head>

<body>

<h3>请拖拽您的头像到下方区域</h3>

<div id="container">

</div>

<script>

    /*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/

    document.ondragover = function (e) {

        e.preventDefault();  //只有在ondragover中阻止默认行为才能触发 ondrop 而不是 ondragleave

    };

    document.ondrop = function (e) {

        e.preventDefault();  //阻止 document.ondrop的默认行为  *** 在新窗口中打开拖进的图片

    };

    /*拖拽的源对象----- 客户端的一张图片 */

    /*拖拽目标对象-----div#container  若图片释放在此元素上方，则需要在其中显示*/

    container.ondragover = function (e) {

        e.preventDefault();

    };

    container.ondrop = function (e) {

        console.log(e.dataTransfer);

//        chrome 此处的显示有误

        var list = e.dataTransfer.files;

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

            var f = list[i];

//            console.log(f);

            reader(f);

//            读取指定文件的内容 作为“数据URL”

//            reader.readAsDataURL(f);

//            当客户端文件读取完成 触发onload事件

        }

    };

    function reader(f) {

        var reader = new FileReader();

        reader.readAsDataURL(f);

        reader.onload = function () {

//            console.log(reader.result);

            var img = new Image();

            img.src = reader.result;

            container.appendChild(img);

        }

    }

</script>

</body>

</html>

　　

　　

遇到的坑如下：  CHROME显示错误

												


											
HTML5拖拽——将本地文件拖拽到网页中显示的更多相关文章
	

    
								
  1. 如何在浏览器网页中显示word文件内容
		
    如何在浏览器网页中显示word文件内容 把word文件读到byte[]中,再Response.OutputStream.Write(bytes)到客户端去 Page_Load事件中写: //FileS ...
    
		
    2. 
						
  2. HTML5 Video/Audio播放本地文件
		
    这段时间经常看到开发者在反复询问同一个问题,为什么通过设置src属性,不能播放本地的媒体文件?例如video.src=”D:\test.mp4”. 这是因为浏览器中的JavaScript不能直接直接访 ...
    
		
    3. 
						
  3. linux下将本地文件上传到github中？
		
    今天编写一份Python基础代码,经过Linux上传到github上,遇到点问题,已经解决 1.首先sudo su 进入root 用户 2.ls 检查出当前文件下有什么文件 3. cd 进入你将要上传 ...
    
		
    4. 
						
  4. office 文件在网页中显示
		
    1.如何在网页上显示word和excel a.可以使用office组件或aspose将word 和excel 转换为pdf 然后在网页上打开pdf,但是效果不是很好 .比如说excel 多个工作薄不是 ...
    
		
    5. 
						
  5. git删除了本地文件，从远程仓库中恢复
		
    在本地删除了文件,使用git pull,无法从远程项目中拉取下来 具体操作 查看项目的状态,会显示出你删除的数据 git status 进入被删除的文件的目录下,假设删除的文件名为 test.txt  ...
    
		
    6. 
						
  6. 在网页中显示PDF文件及vue项目中弹出PDF
		
    1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...
    
		
    7. 
						
  7. 如何直接在网页中显示PDF文件
		
    通过的浏览器:360.Firefox.IE.Chrome 2. 下面这个完整点: <param name="_Version" value="65539" ...
    
		
    8. 
						
  8. 网页中显示xml，直接显示xml格式的文件
		
    第一种方法 使用<pre></pre>包围代码(在浏览器中测试不行啊,但是在富编辑器中又可以,怪):使用<xmp></xmp>包围代码(官方不推荐,但是 ...
    
		
    9. 
						
  9. Web存储及文件拖拽
		
    存储 实现内容的永久保存(localStorage) 保存: localStorage.自定义键名="123"; 获取: //判断是否有内容 if(localStorage.自定义 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. GCD详细用法
			
    一.延迟执行 1.介绍 第一种方法,该方法在那个线程调用,那么run就在哪个线程执行(当前线程),通常是主线程. [self performSelector:@selector(run) withOb ...
    
			
    2. 
						
  2. openGL一些概念01
			
    顶点数据: 顶点数据是一系列顶点的集合. 一个顶点(Vertex)是一个3d坐标的数据的集合. 而顶点数据是用顶点属性(Vertex Attribute)表示的,它可以包含任何我们想用的数据. (但是 ...
    
			
    3. 
						
  3. ListView显示Sqlite的数据
			
    在安卓中,ListView和Sqlite都是十分常用的.这次我们来结合这个两个知识点写一个Demo. 功能:吧SQLite中的数据用ListView显示出来. 先看截图吧 首先是数据库 然后是运行截图 ...
    
			
    4. 
						
  4. 【知识碎片】SQL篇
			
    43.group by多个字段 查询每个班级男女生各多少人 Select count(id),xingbie,banji from tablename group by xingbie,banji 4 ...
    
			
    5. 
						
  5. 【263】Linux 添加环境变量 & 全局 shell 脚本
			
    Linux电脑添加环境变量 方法一:通过修改 profile 文件添加环境变量 1. 打开终端,输入[vi /etc/profile],如下所示,点击回车 [ocean@ygs-jhyang-w1 L ...
    
			
    6. 
						
  6. JAVA基础知识总结12（多线程）
			
    进程:正在进行中的程序.其实进程就是一个应用程序运行时的内存分配空间. 线程:其实就是进程中一个程序执行控制单元,一条执行路径.进程负责的是应用程序的空间的标示.线程负责的是应用程序的执行顺序. 一个 ...
    
			
    7. 
						
  7. js转化与排序
			
    1.对象转化为数组 object.keys() var obj={a:3,b:7,c:8,d:false} alert(Object.keys(obj)) 注意此函数会把对象的key转化为数组 spl ...
    
			
    8. 
						
  8. Selenium二次封装-Java版本
			
    package com.yanfuchang.selenium.utils; import java.awt.AWTException; import java.awt.Robot; import j ...
    
			
    9. 
						
  9. 算法Sedgewick第四版-第1章基础-1.4 Analysis of Algorithms-006BitonicMax
			
    package algorithms.analysis14; import algorithms.util.StdOut; import algorithms.util.StdRandom; /*** ...
    
			
    10. 
						
  10. 导入project后lib文件夹一直没有jar包
			
    原因: 导入project,倒错了项目,只因为后面新建的项目名称有和前面的差不多,导致自己选择了原来的项目,因此,项目的注解一直报错.
    
			
    11.