<!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. ASP.NET MVC - 安全、身份认证、角色授权和ASP.NET Identity

    ASP.NET MVC - 安全.身份认证.角色授权和ASP.NET Identity ASP.NET MVC内置的认证特性 AuthorizeAttribute特性(System.Web.Mvc)( ...

  2. CF1091E New Year and the Acquaintance Estimation

    题目地址:CF1091E New Year and the Acquaintance Estimation 首先,易知 \(ans\) 的奇偶性与所有给出的数的和的奇偶性相同 其次,易证 \(ans\ ...

  3. 扒一扒JVM的垃圾回收机制，下次面试你准备好了吗

      相信和小编一样的程序猿们在日常工作或面试当中经常会遇到JVM的垃圾回收问题,有没有在夜深人静的时候详细捋一捋JVM垃圾回收机制中的知识点呢?没时间捋也没关系,因为小编接下来会给你捋一捋. 一. 技 ...

  4. Delphi 三层框架 DataSnap 的服务器端设置

    elphi 三层框架 DataSnap 的服务器端设置: DataSnap 框架有三个模块:DataSnap Server,Server Module,DataSnap Client Module. ...

  5. 用css解决table文字溢出控制td显示字数

    场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...

  6. 用户 'IIS APPPOOL\xxxx' 登录失败

    一.现象发布到iis后,网站出现以下提示异常详细信息: System.Data.SqlClient.SqlException: 用户 'IIS APPPOOL\IdealTest' 登录失败. 二.分 ...

  7. HDU 3333 Turing Tree 离线 线段树/树状数组 区间求和单点修改

    题意: 给一个数列,一些询问,问你$[l,r]$之间不同的数字之和 题解: 11年多校的题,现在属于"人尽皆知傻逼题" 核心思想在于: 对于一个询问$[x,R]$ 无论$x$是什么 ...

  8. 判断鼠标进入容器的方向小Demo

    参考资料: 贤心博客:http://sentsin.com/web/112.html, Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsr ...

  9. 响应式页面-@media介绍

    01 响应式页面-@media介绍,   我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话 ...

  10. python创建tcp服务端和客户端

    1.tcp服务端server from socket import * from time import ctime HOST = '' PORT = 9999 BUFSIZ = 1024 ADDR ...