<!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的更多相关文章

  1. c# 实现文件拖入和拖出(拖拽)

    摘自:http://www.cnblogs.com/eaglet/archive/2009/01/06/1370149.html C# WinForm下一步一步实现文件的拖入和拖出 作者:Eaglet ...

  2. H5 拖拽读取文件和文件夹

    1)拖拽方面的重点是:ondragover 事件 和 ondrop 事件 ondragover 是必须的,ondragover 事件里禁用掉 html 的默认事件,否则 ondrop 事件将无效(直接 ...

  3. VMware Tools安装，设置centos全屏、可拖入文件功能

    Mr·Hu原创作品.转载请注明出处http://www.cnblogs.com/huxiuqian/p/7843126.html 由于在VM中使用小屏太不方便,所以进行全屏化,亦可进行文件共享. 1. ...

  4. Java读取文件加锁代码Demo(利用Java的NIO)

    本博文部分转载于:http://blog.csdn.net/wangbaochu/article/details/48546717 Java 提供了文件锁FileLock类,利用这个类可以控制不同程序 ...

  5. Genymotion模拟器拖入文件报An error occured while deploying the file的错误

    今天需要用到资源文件,需要将资源文件拖拽到sd卡中,但老是出现这个问题: 资源文件拖不进去genymotion.查看了sd的DownLoad目录,确实没有成功拖拽进去. 遇到这种问题的,我按下面的思路 ...

  6. 解决SecureCRT远程Linux遇到文件不能直接往CRT里直接拖入的问题

    不能拖入到CRT的第一个原因可能是Options-->Global Options-->Terminal中的Mouse下的Copy on select没有勾选.当发现自己勾选了也不能往里面 ...

  7. Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传

    html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta  ...

  8. Html5+NodeJS——拖拽多个文件上传到服务器

    实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...

  9. Android从assets目录下读取文件相关

    有一个需求是app的帮助文档是word格式,ios可以直接用webview加载word显示,Android不行.而美工不配合转换成图片,前端没时间把word写成html 没办法,自己搞. 步骤: 1. ...

随机推荐

  1. 关于linux内核用纯c语言编写的思考

    在阅读linux2.6 版本内核的虚拟文件系统和驱动子系统的时候,我发现内核纯用c语言编写其实也是有一点不方便,特别是内核中大量存在了对象的概念,比如说文件对象,描述起来使用对象描述,但是对象在c语言 ...

  2. (蓝桥杯)第八届A组C/C++方格分割

    #include<iostream> #include<memory.h> #include<stack> #include<string> #incl ...

  3. Flask - Flask的蓝图(BluePrint)

    目录 Flask - Flask的蓝图(BluePrint) 一. 初始Flask蓝图 进阶Flask蓝图 使用蓝图做一个增删改查 1.使用蓝图进行web应用搭建: 2.使用Flask蓝图,查看学生信 ...

  4. Golang之路

    目录 Golang之路 Golang之路 Golang(一) - 开篇必须吹牛逼 Golang(二) - 第一个go程序和基本语法 Golang(三) - 函数 Golang(四) - 流程控制 Go ...

  5. 从NLP任务中文本向量的降维问题，引出LSH（Locality Sensitive Hash 局部敏感哈希）算法及其思想的讨论

    1. 引言 - 近似近邻搜索被提出所在的时代背景和挑战 0x1:从NN(Neighbor Search)说起 ANN的前身技术是NN(Neighbor Search),简单地说,最近邻检索就是根据数据 ...

  6. 【hdu 2108】Shape of HDU

    [题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=2108 [题意] [题解] 逆时针; 可以想象一下; 如果是凸多边形的话; 逆时针的相邻的两条边; ...

  7. N天学习一个Linux命令之mkdir

    前言 暂无 用途 用于新建目录 常用参数 1.设置目录权限-m, --mode=MODE 2.递归创建目录(父目录不存在时,也创建)-p, --parents 3.其它-v, --verbose pr ...

  8. RPC服务框架探索之Thrift

    前言架构服务化后,需要实现一套方便调用各服务的框架,现在开源如日中天,优先会寻找开源实现,如果没有合适自家公司业务的,才会考虑从零开发,尤其是一切以KPI为准绳的公司,谁会跟钱过不去?N个月之前,公司 ...

  9. ps f

    这个命令可以以树形结构列出进程信息.可以清楚的看清父进程子进程直接的关系.可笑我之前还以为所有的命令参数都是带有一个中划线的. 不过,这里列出的进程好像不全.应该仔细的看看ps 的命令. [root@ ...

  10. Mac下OpenCV开发

    1.         环境搭建 a)       安装Homebrew i.            下载地址:http://github.com/mxcl/homebrew/tarball/maste ...