<!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. inet_XX族函数

    在网络编程中, 经常会将网络字节转为本地字节或者将本地字节转为网络字节, 但是如果每次我们都是都通过htonl, ntohl函数需要将10进制转为整数, 甚至还用将字符串转为整数, 再转为网络字节, ...

  2. Django settings.py的一些配置

    官方文档:settings配置 静态文件配置链接 # 语言改为中文: LANGUAGE_CODE = "zh-hans" # 时区由UTC改为Asia/Shanghai,这样有关时 ...

  3. 亚马逊免费服务器搭建Discuz!论坛过程(四)

    上述命令还可能因缺少包引发其他错误: 如果出错则安装对应的包即可. 以下供参考: yum install libxml2 yum install libxml2-devel -y yum instal ...

  4. MVC.Net：Razor指定模板

    在MVC.Net开发中,我们通常会在_ViewStart.cshtml中指定一个默认的模板,在文件开头输入如下代码: @{ Layout = "~/Views/Shared/[自己定义的模板 ...

  5. 网络银行木马DYRE知多少（1）

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  6. POJ 2411 插头DP

    //插头DP,算是广义路径的吧. /* 我是这样想的,定义填数的为0,未填的为1.然后,初始自然是(0,0).我还定义了整个棋盘的状态,不知是否多此一举. 这样,把轮廓线上的格子状态记录.当(I,J) ...

  7. 各个领域常见的一些bug汇总

    一 Android系统功能测试设计的测试用例 a.对所测APP划分模块 b.详细列出每个模块的功能点(使用Xmind绘制功能图) c.使用等价类划分.边界值.场景发等对各功能点编写测试用例(考虑中断功 ...

  8. 从头认识java-15.6 队列（Queue）

    这一章节我们来讨论一下队列(Queue). 1.什么是队列? 队列是一种特殊的线性表,特殊之处在于它仅仅同意在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样.队列是 ...

  9. Windows移动开发（五）——初始XAML

    关于详细的基本功就先说这么多.后面遇到再补充说明,前面说的都是一些代码和原理方面的东西.接下来说的会有界面和代码结合,会有成就感,由于能真正的做出东西来了. Windows移动开发包含Windows ...

  10. linux 启动两个tomcat

    按照下面的步骤操作即可部署成功:一些具体操作命令就不详细说了,直接说有用的:1.在 /usr/local 下部署两个Tomcat,tomcat的文件夹重命名为:tomcat6-1  .  tomcat ...