<!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. CSL 的字符串(单调栈)

    题目链接:https://ac.nowcoder.com/acm/contest/551/D 题目大意: 题目描述 CSL 以前不会字符串算法,经过一年的训练,他还是不会……于是他打算向你求助. 给定 ...

  2. Tip：什么是JavaBean

    可视化JavaBean  非可视化JavaBean(分:值JavaBean和工具JavaBean) JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参 ...

  3. Setup Sight Sense

    调节感知组件参数 绑定视觉事件 PawnSensingComp->OnSeePawn.AddDynamic(this, &AFPSAIGuard::OnPawnSeen); 在头文件中声 ...

  4. 20165234 《Java程序设计》第七周学习总结

    第七周学习总结 教材内容学习 第十一章 JDBC与MySQL数据库 连接数据库: 1. 下载JDBC-MySQL数据库驱动 2. 加载JDBC-MySQL数据库驱动 3. 连接数据库 条件与排序查询: ...

  5. 老师博客copy

    新闻 管理   Py西游攻关之基础数据类型   数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频 ...

  6. telegram即时通信软件和outline ---- by 余弦 by倾旋

    第一次遇到它 是在余弦的圈子里发现的tele推送,他当时关键部分说的极其少,就三个字,你懂的..看完以后,我想哭.我真的不懂.. 我是如何突破这个术语的 近期,随着信息源的增多.(收集了大量的可靠公众 ...

  7. c++学习day3（字符串_指针）

    1.字符串 1)三种形式 用双引号括起来的字符串常量:结尾会有一个'\0'字符,但该字符只占据字节数,不会使字符串长度增加. 存放于字符数组中,以'\0'字符结尾:数组元素个数应至少为字符串长度+1 ...

  8. C#代码处理前台html标签拼接

    之前一篇文章是写,JavaScript处理特殊字符拼接时截断问题.最近在处理公司老软件兼容性升级时碰到的一个类似的问题,这次是后台拼接字符串,前台.aspx页面显示的.中间走了两次弯路,在此记录一下. ...

  9. 022_applescript快速入门教程

    基础语法 一.这部分介绍注释,发出声音,弹窗 (1)简单入门 <1>多行注释 (* this is multi comment *) <2>发出响声 beep 3 (2) #表 ...

  10. python学习第1天

    01 cpu 内存 硬盘 操作系统 CPU:中央处理器,相当于人大脑. 飞机 内存:临时存储数据. 8g,16g, 高铁 1,成本高. 2,断电即消失. 硬盘:长期存储大量的数据. 1T 512G等等 ...