<!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 boot 与 spring cloud 关系

    公司使用spring cloud,所以稍微了解一下 看了一下spring官网对 spring boot 以及 spring cloud 的解释 Spring Boot Spring Boot make ...

  2. 《一头扎进SpringMvc视频教程》Rest风格的资源URL

    5.@PathVariable和@RequestParam的区别 请求路径上有个id的变量值,可以通过@PathVariable来获取  @RequestMapping(value = "/ ...

  3. scrapy基本使用（一）

    scrapy基本使用(一) 参考文档:Scrapy入门教程 http://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/tutorial.html scrapy ...

  4. Django学习手册 - ORM sqlit基础数据库操作

    步骤阐述:( splitDB 是Django自带的一个数据库) 1.在APP01 中的 models.py 配置DB信息  userinfo 相当于数据表的表名,而 uname.pwd 相当于 表中的 ...

  5. w10谷歌chrome关闭自动更新

    运行输入:msconfig打开服务 选择服务,找到谷歌更新 ,点击禁用  ,然后保存 保存会要求重启电脑 ,重启后打开页面谷歌  ,会出现弹窗,是否更新 ,点否 . 然后解决,不会再自动更新了. 这是 ...

  6. 使用CORS方式跨域

    什么是CORS CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. ===前端 不需要携 ...

  7. python 携带cookie获取页面内容

    有时会遇到爬取的页面需要登录,这就要带上cookie了. 下面记录了几种携带cookie的方法 # coding=utf-8 import requests s = requests.Session( ...

  8. DES和3DES加密算法C语言实现【转】

    转自:https://blog.csdn.net/leumber/article/details/78043675 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  9. 查询设备的IP地址/掩码/MAC/网关

    import commands, sys import platform from _utils.patrol2 import run_cmd, data_format, report_format ...

  10. cef_binary_3.2623.1401.gb90a3be

    这个资源现在很难搜索到 分享给大家 http://www.ceffans.com/forum.php?mod=viewthread&tid=9 http://pan.baidu.com/sha ...