拖入浏览器读取文件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. ...
随机推荐
- 使用脚手架创建vue项目之后会有很多警告,如何关闭它!
依次打开build→webpack.base.conf.js文件,然后找到createLintingRule,把里面的内容选择性的删除即可,就是这么easy;
- uva1584 Circular Sequence(Uva-1584)
vj:https://vjudge.net/problem/UVA-1584 这个题讲的是一个圆环,圆环上面有一堆字母,找出字典序最小的那一圈 这个题我觉得直接用c语言的strcmp那一套感觉真是用不 ...
- Eclipse中使用struts标签时出错
原因是Action和ActionForm对应文件中没有继承相应的类,具体来说: ActionForm的编写: 必须继承org.apache.struts.action.ActionForm Actio ...
- Git：文件操作和历史回退
目录 创建仓库 创建文件/文件夹 修改文件/文件夹 回到修改前的版本 撤销修改 删除文件 工作区.暂存区.版本区 创建仓库 创建新文件夹:mkdir learngit 进入:cd learngit l ...
- 实验十二 团队作业8：软件测试与Alpha冲刺 第三天
项目 内容 这个作业属于哪个课程 老师链接 这个作业的要求在哪里 作业链接地址 团队名称 always run 作业学习目标 (1)掌握软件测试基础技术.(2)学习迭代式增量软件开发过程(Scrum) ...
- 【codeforces 510D】Fox And Jumping
[题目链接]:http://codeforces.com/contest/510/problem/D [题意] 你可以买n种卡片; 每种卡片的花费对应c[i]; 当你拥有了第i种卡片之后; 你可以在任 ...
- [COGS 2264]魔法传输
[COGS 2264]魔法传输 题目 自从看了<哈利波特>,小Y就十分渴望获得魔法值.于是他和一群向往魔法的孩子(当然这些孩子们都是不会魔法的)来到了哈利波特的家,大家坐成一排.哈利波特会 ...
- hdu 3549 最大流
#include<stdio.h> #include<string.h> #include<queue> #include<iostream> usin ...
- Linux模块化机制和module_init
致谢: 微信公众号:嵌入式企鹅圈 每天都新增爱好者关注,感谢大家的支持和大牛们的建议. 本人将竭力出品很多其它优质的原创文章回馈大家的厚爱. 引子:模块化机制长处 模块化机制(module)是Linu ...
- poj 1080 Human Gene Functions (最长公共子序列变形)
题意:有两个代表基因序列的字符串s1和s2,在两个基因序列中通过添加"-"来使得两个序列等长:其中每对基因匹配时会形成题中图片所示匹配值,求所能得到的总的最大匹配值. 题解:这题运 ...