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. doker 笔记（1） 架构
			
    Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image Registry Docker 容器  ...
    
			
    2. 
						
  2. 配置镜像yum源--解决RHN not available的问题
			
    由于RHN服务是收费的,在安装redhat系统时,自带的yum可能不能使用.中国有很多好用的镜像源,我们可以把yum源更改到国内镜像源上,步骤如下: 一.卸载本地yum #rpm –qa|grep y ...
    
			
    3. 
						
  3. oracle DCL-(grant、revoke )
			
    1.授权GRANT <权限列表> to <user_name>; 2.收回权限REVOKE <权限列表> from <user_name>
    
			
    4. 
						
  4. day17 14.dao模式介绍
			
    Web的三层架构,不是MVC,Web层,Service层,DAO层. 之前玩的JSP Servlet JavaBean那是MVC模式,那玩意只是表现层的东西. 转账汇款的例子. 说了这么多有啥用啊,一 ...
    
			
    5. 
						
  5. [P3812][模板]线性基
			
    解题关键:求异或最大值.线性基模板题. 极大线性无关组的概念. 异或的值域相同. #include<cstdio> #include<cstring> #include< ...
    
			
    6. 
						
  6. 一个典型的PHP分页实例代码
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    7. 
						
  7. Spring IOC容器解析及实现原理
			
    最近一段时间,“容器”两个字一直萦绕在我的耳边,甚至是吃饭.睡觉的时候都在我脑子里蹦来蹦去的.随着这些天一次次的交流.讨论,对于容器的理解也逐渐加深.理论上的东西终归要落实到实践,今天就借助sprin ...
    
			
    8. 
						
  8. C语言-郝斌笔记-002病毒程序示范
			
    病毒程序示范 /* 龌龊的程序! */ # include <stdio.h> # include <windows.h> # include <malloc.h> ...
    
			
    9. 
						
  9. mysql--笔记1
			
    今日内容介绍1.MySQL数据库2.SQL语句=========================================================1 数据库概念 1.1: 什么是数据库  ...
    
			
    10. 
						
  10. 【Android开源】CircleImageView自定义圆形控件的使用
			
    github地址:https://github.com/hdodenhof/CircleImageView package de.hdodenhof.circleimageview; import e ...
    
			
    11.