<!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. python 单元测试中处理用例失败的情况

    今天有一个需求, 在单元测试失败的时候打印一些日志, 我们管他叫 dosomething 吧 ,反正就是做一些操作 查了下并没有查到相关的方法, 于是研究了一波unittest 的源码 发现了这个东西 ...

  2. JAVA学习总结-常用数据结构

    java中集合框架其实就是数据结构的实现的封装; 参考资料:任小龙教学视频 1,什么是数据结构? 数据结构是计算机存储,组织数据的方式; 数据结构是指相互之间存在一种或多种特定关系的数据元素的集合; ...

  3. iptables简单了解

    简介 Iptables是unix/linux自带的一款优秀且开源的基于包过滤的防火墙工具. 怎么用 可以用来做主机防火墙. 可以做局域网共享上网. 可以做ip及端口映射. Iptables工作流程 i ...

  4. 【LeetCode Weekly Contest 26 Q2】Longest Uncommon Subsequence II

    [题目链接]:https://leetcode.com/contest/leetcode-weekly-contest-26/problems/longest-uncommon-subsequence ...

  5. Java Web学习总结（23）——Distributed Configuration Management Platform(分布式配置管理平台)

    专注于各种 分布式系统配置管理 的通用组件/通用平台, 提供统一的配置管理服务. 主要目标: 部署极其简单:同一个上线包,无须改动配置,即可在 多个环境中(RD/QA/PRODUCTION) 上线 部 ...

  6. 像 IDE 一样使用 vim

    本文转载自:https://github.com/yangyangwithgnu/use_vim_as_ide ##[目录] 0 vim 必知会........0.1 .vimrc 文件....... ...

  7. 洛谷 P1843 奶牛晒衣服

    题目背景 熊大妈决定给每个牛宝宝都穿上可爱的婴儿装 . 于是 , 为牛宝宝洗晒衣服就成了很不爽的事情. 题目描述 熊大妈请你帮助完成这个重任 . 洗完衣服后 , 你就要弄干衣服 . 衣服在自然条件下用 ...

  8. 1066N ！最右边非零数

    http://hi.baidu.com/nicker2010/item/4fa83c4c5050b3e5a4c066ec 另一个 Last non-zero Digit in N! Time Limi ...

  9. spring boot开发REST接口

    1.配置pom.xml文件的<parent>和<depencencies>,指定spring boot web依赖 <parent> <groupId> ...

  10. java 垃圾收集

    1.为什么使用垃圾收集 a.把用户从释放占用内存的重担中解救出来 b.帮助程序保持完整性 2.垃圾收集算法 检测出垃圾对象,必须回收垃圾对象所使用的堆空间并还给程序 垃圾检测:通过建立一个根对象集合并 ...