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. 最全SDWebImage-3.8版本源码阅读详解
			
    一.前言 SDWebImage,非常友好的网络图片加载第三方框架,在GitHub中已经获得了15000++的star,链接地址:https://github.com/rs/SDWebImage 本人分 ...
    
			
    2. 
						
  2. Tiny4412 u-boot分析（1）u-boot配置流程分析
			
    参考Friendlyarm的文档,编译uboot的流程为 make tiny4412_config make 这个过程主要涉及到两个文件,顶层的Makefile文件和mkconfig文件,makeco ...
    
			
    3. 
						
  3. 常见浏览器bug以及解决方法
			
    1.图片下方3像素: (1).描述:在div中插入图片时,图片会将div下方撑大三像素. (2).hack1:将</div>与<img>写在一行上(可以解决ie6/7): (3 ...
    
			
    4. 
						
  4. PHP中几种加密形式
			
    1.Md5加密和Crypt都是单向加密: 登陆时把登录密码转为md5值,然后和数据库中的进行比较. 其中crypt中的盐值支持多种: 以CRYPT_STD_DES是以/0-9A-Za-z/中的两个字符 ...
    
			
    5. 
						
  5. 一行代码搞定所有屏幕适配AbViewUtil
			
    适配原理:抛弃google提供的dip理论与多套图片与布局方案,采用与UI设计师通用的px作为标准单位,原理是将UI设计师的设计图与当前查看的手机或其他设备的屏幕像素尺寸进行换算,得到缩放比例,在Ac ...
    
			
    6. 
						
  6. 关于A类，B类，C类IP地址的网段和主机数的计算方法
			
    关于A类,B类,C类IP地址的网段和主机数的计算方法 IP地址是一个32位的二进制数,由四个八位字段组成.每个IP地址包括两部分:一部分为网络标识(网络号),一部分为主机标识(主机号). A类地址前8 ...
    
			
    7. 
						
  7. 使用RSS提升DPDK应用的性能(转)
			
    本文描述了RSS以及在DPDK中如何配置RSS达到性能提升和统一分发. 什么是RSS RSS(Receive Side Scaling)是一种能够在多处理器系统下使接收报文在多个CPU之间高效分发的网 ...
    
			
    8. 
						
  8. p2234&bzoj1588 营业额统计
			
    传送门 题目 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额 ...
    
			
    9. 
						
  9. js定时任务
			
    <input type="button" id="btn" value="保存图片" onclick="settime(th ...
    
			
    10. 
						
  10. leetcode mergeKsortedlink
			
    代码:这个代码是有问题的,问题的产生是map中不能存放相同的值. #include<iostream> #include<vector> #include<cmath&g ...
    
			
    11.