有了HTML5，老板再也不用担心我们的上传了，再加上有拖拽上传是不是很酷。百度一下，有关HTML5拖拽上传的文章和实例不少，都缺不了一个至关重要的东东DataTransfer。但是详细介绍的不多，尤其这个对象到底包含了哪些玩意。

翻墙出去问了下谷歌找到了DataTransfer的API，下面就介绍一下：

DataTransfer

拖拽数据传递对象，一般使用方式event.dataTransfer。

dataTransfer . dropEffect [ = value ]

拖拽效果，可选值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all”, and “uninitialized”。

dataTransfer . items

拖拽的数据集合，是一个数组。

dataTransfer . setDragImage (element, x, y)

Uses the given element to update the drag feedback, replacing any previously specified feedback.

英文有点拗口，就是拖拽过程中定义一个元素替换原有的，可以看到拖拽元素跟随的效果。

dataTransfer . addElement (element)

Adds the given element to the list of elements used to render the drag feedback.

dataTransfer . types

Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string “Files”.

data = dataTransfer . getData (format)

Returns the specified data. If there is no such data, returns the empty string.

获取自定义的数据格式，如ev.dataTransfer.getData("text");通常是配合ev.dataTransfer.setData使用。

dataTransfer . setData(format, data)

Adds the specified data.

添加自定义数据格式，如ev.dataTransfer.setData("text", ev.target.innerHTML);有点像jquery里面的data

dataTransfer . clearData( [ format ] )

Removes the data of the specified formats. Removes all data if the argument is omitted.

清除自定义的数据格式及其数据。

dataTransfer . files

Returns a FileList of the files being dragged, if any.

拖拽的文件列表对象。

下面是图片拖拽本地预览的DEMO：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>HTML5文件拖拽预览Demo</title>

    <style type="text/css">

        h1{

            padding:0px;

            margin:0px;

        }

        div#show{

            border: 1px solid #ccc;

            width: 400px;

            height: 300px;

            display: -moz-box;

            display: -webkit-box;

            -moz-box-align: center;

            -webkit-box-align: center;

            -moz-box-pack: center;

            -webkit-box-pack: center;

            resize:both;

            overflow:auto;

        }

        div[id^=show]:hover{

            border: 1px solid #333;

        }

        div#main{

            width:100%;

        }

        div#successLabel

        {

            color:Red;

        }

        div#content

        {

            display:none;

        }

    </style>

    <script type="text/javascript">

        function init()

        {

            var dest = document.getElementById("show");

            dest.addEventListener("dragover", function(ev)

            {

                ev.stopPropagation();

                ev.preventDefault();

            }, false);

            dest.addEventListener("dragend", function(ev)

            {

                ev.stopPropagation();

                ev.preventDefault();

            }, false);

            dest.addEventListener("drop", function (ev) {

                ev.stopPropagation();

                ev.preventDefault();

                console.log(ev.dataTransfer)

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

                var reader = new FileReader();

                if (file.type.substr(0, 5) == "image") {

                    reader.onload = function (event) {

                        dest.style.background = 'url(' + event.target.result + ') no-repeat center';

                        dest.innerHTML = "";

                    };

                    reader.readAsDataURL(file);

                }

                else if (file.type.substr(0, 4) == "text") {

                    reader.readAsText(file);

                    reader.onload = function (f) {

                        dest.innerHTML = "<pre>" + this.result + "</pre>";

                        dest.style.background = "white";

                    }

                }

                else {

                    dest.innerHTML = "暂不支持此类文件的预览";

                    dest.style.background = "white";

                }

            }, false);

        }

        //设置页面属性，不执行默认处理（拒绝被拖放）

        document.ondragover = function(e){e.preventDefault();};

        document.ondrop = function(e){e.preventDefault();}

        window.onload=init;

    </script>

</head>

<body>

    <h1>HTML5文件拖拽预览Demo</h1>

    <div id="show">

    文件预览区，仅限图片和txt文件

    </div>

</body>

</html>

HTML5拖拽功能中 dataTransfer对象详解的更多相关文章

  1. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  2. HTML5拖拽功能drag

    1.创建拖拽对象 给需要拖拽的元素设置draggable属性,它有三个值: true:元素可以被拖拽:false:元素不能被拖拽:auto: 浏览器自己判断元素是否能被拖拽. 2.处理拖拽事件当我们拖 ...

  3. django中request对象详解(转载)

    django中的request对象详解 Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将  HttpRequest对象  作为第一个参数传入该函数. ...

  4. HTML5拖拽表格中单元格间的数据库

    效果图:

  5. 转:AJAX中xhr对象详解

    XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML ...

  6. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  7. 转-JS中document对象详解

    对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置 ...

  8. JS中document对象详解

    转自:http://www.cnblogs.com/andycai/archive/2010/06/29/1767351.html 对象属性 document.title //设置文档标题等价于HTM ...

  9. JS中navigator对象详解

    <code class="language-html"><!doctype html> <html> <head> <meta ...

随机推荐

  1. loj #6570. 毛毛虫计数

    $ \color{#0066ff}{ 题目描述 }$ hsezoi 巨佬 olinr 喜欢 van 毛毛虫,他定义毛毛虫是一棵树,满足树上存在一条树链,使得树上所有点到这条树链的距离最多为 1. 给定 ...

  2. 理解webpack中的publicPath

    outPut中的publicPath 默认值: 空字符串. publicPath是非常有必要配置的,他是项目中引入静态资源(js.css)时的基础路径. 例如: outPut.publicPath = ...

  3. celery简单理解和使用

    解决同步阻塞的问题 将耗时任务放到后台异步执行,不影响用户其他操作. 实现原理 任务队列是一种跨线程,跨机器的机制. 任务队列中包含称作任务的工作单元.有专门的进程持续不断的监视任务队列,并从中得到新 ...

  4. Nodejs连接数据库为何使用连接池

    问题一.nodejs既然是单线程运行,在连接数据库时为何要使用连接池呢? 问题二,redis服务端是单线程运行的,使用连接池到redis,服务端还是串行处理,有什么意义么? 这两个问题都涉及到单线程与 ...

  5. 微信小程序 没有找到node_modules目录 ，小程序引入vant框架报错。

    如果大家是按照官网的引入方法,是否报错如图 不着急,大家就试试我的方法吧!两步走完美搞定! 第一步: 在小程序顶部点击设置->项目设置,会弹出下面的窗口.大家把使用npm模块勾上对勾. 第二步: ...

  6. Linux安装Elasticsearch-head插件

    首先需要下载以下内容: 我试验的对应版本:ES:elasticsearch-6.6.1.tar.gz  Node:node-v10.15.3-linux-x64.tar  JDK:jdk-8u201- ...

  7. rest-assured之如何指定请求数据(Specifying Request Data 包括请求参数、请求头、cookie等)

    我们除了可以为一个请求指定请求参数之外,还可以指定请求头(header).cookies.请求体(body)以及请求内容类型(content-type)等,下面我们就来一一介绍一下: 一.请求HTTP ...

  8. 命令行下class redis not found 解决

    1.在命令行下输入 php --ini 2.在浏览器中查看 phpinfo() 可以看出,我  的phpinfo和命令行的就不是一个php.ini文件.因为我有几个版本的php , 并且在环境变量中配 ...

  9. Tomcat 9内存溢出："http-apr-8080-Acceptor-0" java.lang.OutOfMemoryError: Direct buffer memory

    Tomcat开启了APR模式,而APR模式会使用堆外内存,关于堆内存可从如下链接了解一下:http://blog.csdn.net/zhouhl_cn/article/details/6573213. ...

  10. 面向对象程序设计（C++）_作业一_设计、定义并实现Complex类

    源代码: 运行结果: