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. loader的意义和内部机制浅析
			
    意义: loader可以异步的加载数据到我们的activity或者fragment上面,让加载数据的时候ui线程不阻塞. 而且当数据发生变化的时候,还可以及时更新 具体用法参考 http://deve ...
    
			
    2. 
						
  2. java输入输出--I/O操作基础知识学习
			
    一.java的I/O流 1. 输入流(字节流和字符流,字节流操作的数据单元是8位的字节,字符流操作的是16位的字符)(InputStream 和Reader作为基类) 2.输出流(字节流和字符流,字节 ...
    
			
    3. 
						
  3. 【总结整理】openlayer
			
    实时路况 http://www.cnblogs.com/gisvip/archive/2012/11/24/2787141.html
    
			
    4. 
						
  4. Codeforces 8C 状压DP
			
    题意:有个人想收拾行李,而n个物品散落在房间的各个角落里(n < 24).现在给你旅行箱的坐标(人初始在旅行箱处),以及n个物品的坐标,你一次只能拿最多两个物品,并且拿了物品就必须放回旅行箱,不 ...
    
			
    5. 
						
  5. Codeforces 914C Travelling Salesman and Special Numbers (数位DP）
			
    题意:题目中定义了一种运算,把数字x变成数字x的二进制位数.问小于n的恰好k次运算可以变成1的数的个数(题目中的n是二进制数,n最大到2^1000) 思路:容易发现,无论多么大的数,只要进行了一次运算 ...
    
			
    6. 
						
  6. go install 命令
			
    go install 命令简介 用于编译并安装代码包或源代码文件 安装代码包会在当前工作区的 'pkg/<平台相关目录>'下生成'归档文件' 安装命令源码文件会在当前工作区的'bin'目录 ...
    
			
    7. 
						
  7. cocos2d-x坐标系详解
			
    cocos2d-x官方文档 笛卡尔坐标系 不同坐标系简介 笛卡尔坐标系 你可能上学的时候就已经知道“笛卡尔坐标系”了,它在几何课本里经常用到.如果你已经忘得差不多了,下面这些图片可以很快唤起你的记忆: ...
    
			
    8. 
						
  8. windows VS2013 编译安装QWT6.1和QWTPolar1.1.1
			
    QWT的编译和配置 1. 下载QWT从官网 For getting a snapshot with all bugfixes for the latest 5.2 release: svn expor ...
    
			
    9. 
						
  9. NSWindow上添加NSView
			
    DBSCustomView *view = [[DBSCustomView alloc] initWithFrame:NSMakeRect(100, 100, 100, 100)]; [self.wi ...
    
			
    10. 
						
  10. c++调用shell命令
			
    system()这个函数就不说了,不能读取返回值. #include<cstdio> int main() { FILE *fp; ]={}; fp=popen("ssh roo ...
    
			
    11.