拖入浏览器读取文件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语言比较好的风格梳理
errno int err; tb = malloc(sizeof(struct xtracer_table)); if (!tb) { err = errno; fprintf(stderr, &q ...
- (JS,JAVA,MySql)去除小数后多余的0
分别通过JS,JAVA和MySql实现去除小数后多余的0 1. JS方法 /** *去除小数点后多余的0 */ function cutZero(old) { //拷贝一份 返回去掉零的新串 old ...
- JavaScript day2（变量）
变量(variable) 允许计算机以一种动态的形式来存储和操作数据,通过操作指向数据的指针而不是数据本身来避免了内存泄露,变量(Variable)的名字可以由数字.字母.$ 或者 _组成,但是不能包 ...
- 基于vue的nuxt框架cnode社区服务端渲染
nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub ...
- 弹层蒙版（mask），ios滚动穿透，我们项目的解决方案
问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...
- 转：Windows Phone 7 设计简介
英文原文:smashingmagazine 导读:Windows Phone 7 引进了一个全新的内容管理和用户界面,命名为Metro的设计语言和理论.微软这次所看准的市场和用户群也与之前的老一代 W ...
- 清北学堂模拟赛d7t6 拯救世界
分析:如果题目中没有环的话就是一道裸的最长路的题目,一旦有环每个城市就会被救多次火了.把有向有环图变成有向无环图只需要tarjan一边就可以了. #include <bits/stdc++.h& ...
- redis高可用，保证高并发
目录 redis如何通过读写分离来承载读请求QPS超过10万+ redis replication以及master持久化对主从架构的安全意义 redis主从复制原理.断点续传.无磁盘化复制.过期key ...
- P1464 Function 洛谷
https://www.luogu.org/problem/show?pid=1464 题目描述 对于一个递归函数w(a,b,c) 如果a<=0 or b<=0 or c<=0就返回 ...
- linux c编程訪问数据库
源代码例如以下: #include <stdio.h> #include <stdlib.h> #include <mysql/mysql.h> int main( ...