<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .container {

            width: 200px;

            height: 200px;

            background: #ccc;

            margin: 60px auto;

            border: 1px solid silver;

            text-align: center;

            line-height: 200px;

        }

    </style>

    <script>

        window.onload = function () {

            //ondragenter  拖拽文件进入时触发的事件

            //ondragleave  拖拽文件离开时触发的事件

            //ondragover   拖拽鼠标悬停的时候触发的事件

            //ondrop       释放鼠标的时候触发的事件,(前提是ondragover阻止默认事件才能被被触发,本身也要阻止默认事件)

            //为了更好的兼容，建议都使用addEventListener来进行绑定

            let odiv = document.getElementById('container');

            odiv.addEventListener('dragenter', function () {

                this.innerHTML = '请释放鼠标'

            }, false);

            odiv.addEventListener('dragleave', function () {

                this.innerHTML = '请将文件拖拽到此处';

            });

            odiv.addEventListener('dragover', function (ev) {

                console.log('鼠标正在上面');

                ev.preventDefault();

            });

            odiv.addEventListener('drop', function (ev) {

                //文件信息(数组形式)

                console.log(ev.dataTransfer.files);

                console.log('你已经释放鼠标了');

                //注意:阻止默认事件应该放置在FileReader上面

                ev.preventDefault();

                //前端读取文件(注意:以下方法只兼容到IE10)

                let file = ev.dataTransfer.files[0];

                let reader = new FileReader();

                reader.onload = function () {

                    //读取完之后,文件会存放在this.result里面,那么就可以进行相关操作

                    console.log(this.result);

                    alert(this.result);

                };

                reader.onerror = function () {

                };

                reader.readAsText(file);

                //reader.readAsText(file)   以文本的形式读取(文本文件)

                //reader.readAsDataUrl(file)  base64 以图片的形式读取(图片文件)

                //reader.readAsArrayBuffer(file)  原始的二进制数据(编辑,不常用)

                //reader.readAsBinaryBuffer(file)   二进制的文件形式数据(文件上传)

            }, false)

        }

    </script>

</head>

<body>

<div class="container" id="container">

    请将文件拖拽到此处

</div>

</body>

</html>

html5 drag 文件拖拽浅淡的更多相关文章

  1. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

  2. HTML5 drag & drop 拖拽与拖放

    关键词: 1. draggable:规定元素是否可拖动的,draggable=true可拖动 2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer 3 ...

  3. atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

    atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...

  4. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  5. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  6. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  7. Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结

    Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

  8. HTML5——将图片拖拽上传

    如下图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. VC实现文件拖拽OnDropFiles

    文章转自http://blog.csdn.net/zamaolangzi/article/details/5645284 使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是 ...

随机推荐

  1. java.lang.RuntimeException: Cannot create a secure XMLInputFactory 异常处理

    背景:本人在近日的webservice   CXF接口的编写调试过程中,发现一个很奇怪的现象--我在本地对接口进行往返请求时完全没有问题,不管是main方法直接调用还是业务场景里调用都无问题,在其他同 ...

  2. Javascript框架 - ExtJs - 类

    类(ExtJs Class) preparation! 我用的是ext-4.2,解压后会得到以下文件 学习要用到的文件很少,现在保留以下文件和整个文件夹,然后删除其它文件并保持目录结构.本页面底部有提 ...

  3. 20165237 2017-2018-2 《Java程序设计》第十周考试补做及编程题

    20165237 2017-2018-2 <Java程序设计>第十周考试补做及编程题 知识点 1.链表是由若干个称作节点的对象组成的一种数据结构,每个节点含有一个数据和下一个节点的引用 . ...

  4. Django中的csrf基础了解

    简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功能有 ...

  5. keepalived的vip无法ping通【原创】

    今天收到redis的keepalived vip无法ping通的告警,查看服务器和服务时发现vip在服务器上,服务也正常.只能在本机ping通,跨网段无法ping通.切换keepalived vip至 ...

  6. 设计模式C++学习笔记之十五（Composite组合模式）

      15.1.解释 概念:将对象组合成树形结构以表示“部分-整体”的层次结构.Composite使得用户对单个对象和组合的使用具有一致性. main(),客户 CCorpNode,抽象基类,实现基本信 ...

  7. VC,VB操作XML

    TCHAR buffer[MAX_PATH] = {}; ::GetModuleFileName(NULL, buffer, MAX_PATH); CString strPath = buffer; ...

  8. python装饰器的4种类型：函数装饰函数、函数装饰类、类装饰函数、类装饰类

    一:函数装饰函数 def wrapFun(func): def inner(a, b): print('function name:', func.__name__) r = func(a, b) r ...

  9. Centos6.8下SVN安装

    1.yum -y install subversion svnserve --version 查看版本 2.@创建SVN仓库目录 mkdir -p /data/svn/repositories 3.@ ...

  10. 牛客国庆训练,CCPC Camp DAY1 J 倍增,括号匹配

    https://www.nowcoder.com/acm/contest/201#question 题意:中文不翻译了 解法的个人理解: 对于一个合法的区间$[L,R]$ 1.显然其左括号的匹配位置都 ...