拖入浏览器读取文件demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
margin: 100px auto;
width: 500px;
height: 300px;
border: 5px dashed #000;
}
</style>
</head>
<body>
<div class="box"></div>
<img src="" alt="">
</body>
</html>
<script>
// 如果想要拖入浏览器打开文件，必须要实现以下两个方法，并且，要阻止其默认事件
document.ondragover = function(event) {
event.preventDefault();
}
document.ondrop = function(event) {
event.preventDefault();
}
//如果想要拖到浏览器的小盒子里，那么必须把小盒子的默认事件阻止掉
var box = document.querySelector(".box");
box.ondragover = function(event) {
event.preventDefault();
}
box.ondrop = function(event) {
event.preventDefault();
//就可以来读文件
var file = event.dataTransfer.files[0];
console.log(file);
//创建一个filereader
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
alert("haha");
console.log(reader.result);
document.querySelector("img").setAttribute("src", reader.result);
}
}
</script>
拖入浏览器读取文件demo的更多相关文章
- c# 实现文件拖入和拖出(拖拽)
摘自:http://www.cnblogs.com/eaglet/archive/2009/01/06/1370149.html C# WinForm下一步一步实现文件的拖入和拖出 作者:Eaglet ...
- H5 拖拽读取文件和文件夹
1)拖拽方面的重点是:ondragover 事件 和 ondrop 事件 ondragover 是必须的,ondragover 事件里禁用掉 html 的默认事件,否则 ondrop 事件将无效(直接 ...
- VMware Tools安装，设置centos全屏、可拖入文件功能
Mr·Hu原创作品.转载请注明出处http://www.cnblogs.com/huxiuqian/p/7843126.html 由于在VM中使用小屏太不方便,所以进行全屏化,亦可进行文件共享. 1. ...
- Java读取文件加锁代码Demo(利用Java的NIO)
本博文部分转载于:http://blog.csdn.net/wangbaochu/article/details/48546717 Java 提供了文件锁FileLock类,利用这个类可以控制不同程序 ...
- Genymotion模拟器拖入文件报An error occured while deploying the file的错误
今天需要用到资源文件,需要将资源文件拖拽到sd卡中,但老是出现这个问题: 资源文件拖不进去genymotion.查看了sd的DownLoad目录,确实没有成功拖拽进去. 遇到这种问题的,我按下面的思路 ...
- 解决SecureCRT远程Linux遇到文件不能直接往CRT里直接拖入的问题
不能拖入到CRT的第一个原因可能是Options-->Global Options-->Terminal中的Mouse下的Copy on select没有勾选.当发现自己勾选了也不能往里面 ...
- Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传
html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta ...
- Html5+NodeJS——拖拽多个文件上传到服务器
实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...
- Android从assets目录下读取文件相关
有一个需求是app的帮助文档是word格式,ios可以直接用webview加载word显示,Android不行.而美工不配合转换成图片,前端没时间把word写成html 没办法,自己搞. 步骤: 1. ...
随机推荐
- Async/await语法糖实现(Generator)
// generator也是一种迭代器(Iterator) 有next方法,并返回一个对象{value:...,done:...} function run(generatorFunction) { ...
- Oracle query that count connections by minute with start and end times provided
数据结构类似 SQL> select * from t; B E N ----------------- ------------ ...
- MongoDB主库和从库的数据大小不一致原因判断
1. 环境(MongoDB的版本是3.2.16) [root@xxx-mongodb-primary ~]# cat /etc/redhat-release CentOS Linux release ...
- namespace的作用及用法
namespace 所谓namespace,是指标识符的可见范围.C++标准库中的所有标识符都被定义在一个名为 std 的namespace 中. 一.<iostream>和<ios ...
- mongodb数据库的导出与导入
数据库的导出 导出类型为json,数据库:mapdb,集合:bike 字段:bikeId,lat,lng,current_time,source ,条件为source字段为ofo第一条数据 mongo ...
- Django-搭建win7虚拟环境-virtualenv
为什么要配置Django虚拟环境? 例如:在开发Python Django的时候,系统安装的Python3只有一个版本:3.6.所有第三方的包都会被pip安装到Python3的site-package ...
- 洛谷 2234 BZOJ 1588 HNOI2002 营业额统计
[题解] treap模板题,直接用Treap维护前驱.后继,每次找到更接近当前val的加上就好了. #include<cstdio> #include<algorithm> # ...
- SpringMVC项目
一.说明该项目是为了演示SpringMVC框架中涉及到的一些知识点,相对独立,掌握这些,基本上就能够解决工作中遇到的一些问题.整个项目的构建规划如下: 1.创建一个标准的Maven Web项目;2.使 ...
- ASP.NET MVC 提供与訪问 Web Api
ASP.NET MVC 提供与訪问 Web Api 一.提供一个 Web Api 新建一个项目.类型就选 "Web Api". 我用的是MVC5,结果生成的项目一大堆东西.还编译只 ...
- Loadrunner | 录制脚本时弹不出IE的解决办法
Loadrunner在录制脚本的时候有时候会遇到弹不出IE的问题,那怎么解决呢?别急,按照以下几个步骤操作,一般就可以解决这个问题. 1. IE浏览器取消勾选[启用第三方浏览器扩展] 启动IE,从[工 ...