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. Internet Intranet Extranet
			
    Internet: There's only one of it, and you're on it now. Intranet: An internal network local to a com ...
    
			
    2. 
						
  2. Android禁止程序自动旋转的配置
			
    在想要禁止的Activity中加入 android:screenOrientation="portrait" 属性,其中,portrait是竖屏,landscape是横屏
    
			
    3. 
						
  3. 详解CSS float属性（转）
			
    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...
    
			
    4. 
						
  4. bluebird 开发文档链接
			
    参考文献:http://bluebirdjs.com/docs/api/promise.mapseries.html
    
			
    5. 
						
  5. C++面向对象类的实例题目八
			
    题目描述: 编写一个程序输入3个学生的英语和计算机成绩,并按照总分从高到低排序.要求设计一个学生类Student,其定义如下: 程序代码: #include<iostream> using ...
    
			
    6. 
						
  6. WINFORM  无边框窗体 阴影与移动
			
    //窗体移动API[DllImport("user32.dll")]public static extern bool ReleaseCapture();[DllImport(&q ...
    
			
    7. 
						
  7. 7-n!末尾有几个0
			
    如何确定一个N!末尾有多少个零 转载 2015年08月30日 15:02:49 622 题目:1*2*3*……*100 求结果末尾有多少个零 分析:一般类似的题目都会蕴含某种规律或简便方法的,阶乘末尾 ...
    
			
    8. 
						
  8. DesertWind TopCoder - 1570
			
    传送门 分析 首先我们要知道为了情况最坏,无论你到哪,一定会在你前往绿洲的最短路上的那片沙子上刮风,所以这个点到绿洲的最短路即为他相连的点中到绿洲距离最短的距离+3和次短的距离+1的最小值,具体实现见 ...
    
			
    9. 
						
  9. java Iterator类
			
    查看java源码. /* * Copyright (c) 1997, 2013, Oracle and/or its affiliates. All rights reserved. * ORACLE ...
    
			
    10. 
						
  10. Java之命令模式（Command Pattern）
			
    转自:http://www.cnblogs.com/devinzhang/archive/2012/01/06/2315235.html 1.概念 将来自客户端的请求传入一个对象,从而使你可用不同的请 ...
    
			
    11.