<!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. Spring MVC 注解相关

    // required=false表示不传的话,会给参数赋值为null,required=true就是必须要有 @ResponseBody @RequestMapping("testRequ ...

  2. 基于【字符】操作的IO接口：Writer、Reader

    Reader public class BufferedReaderTest { public static void main(String[] args) throws IOException { ...

  3. Web项目笔记(一)JSONP跨域请求及其概念

    https://blog.csdn.net/u014607184/article/details/52027879 https://blog.csdn.net/saytime/article/deta ...

  4. 【转】python模块分析之unittest测试（五）

    [转]python模块分析之unittest测试(五) 系列文章 python模块分析之random(一) python模块分析之hashlib加密(二) python模块分析之typing(三) p ...

  5. filter、map、sorted和reduce函数

    内置函数——filter.map和reduce filter filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回 True或 False,filter ...

  6. 竞赛常用STL备忘录

    __builtin: __builtin_popcount:二进制中 1 的个数__builtin_ctz:末尾的 0,即对 lowbit 取log__builtin_clz:开头的 0,用 31 减 ...

  7. Unity3D Shader 入门

    什么是Shader Shader(着色器)是一段能够针对3D对象进行操作.并被GPU所执行的程序,它负责将输入的Mesh(网格)以指定的方式和输入的贴图或者颜色等组合作用,然后输出.绘图单元可以依据这 ...

  8. Ubuntu18 输入法fcitx安装

    默认iBus非常难用 1.安装fcitx终端输入fcitx提示程序尚未安装.使用命令安装sudo apt-get install fcitx-bin相关的依赖库和框架都会自动安装上.2.安装输入法su ...

  9. Zabbix监控nginx性能的另外一种方式

    Zabbix监控nginx性能的另外一种方式 nginx和php-fpm一样内建了一个状态页,对于想了解nginx的状态以及监控nginx非常有用,为了后续的zabbix监控,我们需要先启用nginx ...

  10. MySQL的连接数

    我使用的数据库,没有针对其进行其他相关设置,最近经常出现连接异常,现象为太多的连接. MySQL查看最大连接数和修改最大连接数 1.查看最大连接数(可通过show variables查看其他的全局参数 ...