拖入浏览器读取文件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. ...
随机推荐
- c++ map迭代器
#include <stdio.h> #include <map> using namespace std; int main(){ map<int, int> m ...
- 解读PTR_ERR,ERR_PTR,IS_ERR
解读PTR_ERR,ERR_PTR,IS_ERR 看到了几个宏PTR_ERR,ERR_PTR,IS_ERR(其实是内联函数).还是不太明白,然后就google搜索了一下,搜出来的结果真是不让人满意,看 ...
- 关于 BaseHTTPServer 的介绍
简介: (1) 基础的web服务器是一个模板,其其角色是客户端和服务器端完成必要的HTTP交互,在basehttpserver模块中可以找到一个名字叫HTTPServer 的服务器基本类 (2)处理程 ...
- ORM 进阶操作
ORM多表操作 一.创建模型 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息:作者详情模型和作者模型之间是一对一的关系. 出版商模型:出版商有 ...
- ASP.NET大闲话：ashx文件有啥用
在VS中右击项目,添加新项,我们找到.ashx文件在新建项模板中叫做“一般处理程序”,那么这个一般处理程序用来干吗的呢? 我们可以这样地简单理解,嗯,不需搞得太复杂,它就类似.aspx文件,用于处理传 ...
- camera placement (paraview)
# 'renderView1' is the view name# current camera placement for renderView1 renderView1.CameraPositio ...
- yum http源
统一集群内,有一个yum本地源即可,集群内其他机器的yum可配成http源 方法: yum1:本地yum源节点 yum2:集群内其他节点 yum1: ①service httpd start ②mki ...
- hdu 2242双联通分量+树形dp
/*先求出双联通缩点,然后进行树形dp*/ #include<stdio.h> #include<string.h> #include<math.h> #defin ...
- poj1330 lca 最近公共祖先问题学习笔记
首先推荐两个博客网址: http://dongxicheng.org/structure/lca-rmq/ http://scturtle.is-programmer.com/posts/30055. ...
- 2015 Changchun Regional
弱没机会去长春,但拿了题来做了,加上请教各路大牛,理论AC了一发,但没实现~(感谢各路有形无形的大牛的指导) A题~Too Rich 给你1,5,10,20,50,100,200,500,1000,2 ...