有了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. 返回参数去掉xml格式，以纯json格式返回（转）

    Json 格式显示public static void Register(HttpConfiguration config) { //////////////设置不以xml格式返回 config.Fo ...

  2. WINDOWS SERVER 2012标准版密钥

    Windows Server 2012 R2 安装密钥(只适用安装,不支持激活) 标准版 = NB4WH-BBBYV-3MPPC-9RCMV-46XCB MMPXK-NBJDQ-JPM34-WX3FM ...

  3. mysql5.1解压版安装

    1.如果已经安装别的版本先卸载干净,cmd管理员权限登录,mysql\bin目录:mysqld -remove 2.环境变量 MYSQL:path 3.my.ini [mysqld]port=3306 ...

  4. python高级（六）——用一等函数实现设计模式

    本文主要内容 经典的“策略”模式 python高级——目录 文中代码均放在github上:https://github.com/ampeeg/cnblogs/tree/master/python高级 ...

  5. Vue-cli3 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

    在vue.config.js里 添加 configureWebpack : { performance: { hints:'warning', //入口起点的最大体积 整数类型(以字节为单位) max ...

  6. vue-cli项目启动遇到的坑

    利用 npm init webpack projectname 之后 切换到项目所在文件夹下,执行命令 npm install ,一直非常慢,卡在那里基本不动. 最后是利用cnpm 安装成功的. 转载 ...

  7. CDH集群安装配置（四）- mysql 的安装

    安装mysql,并且创建相关的表(只需要在chd1上面安装而且需要root权限)1.1 查看Centos自带mysql是否已经安装 yum list installed | grep mysql 卸载 ...

  8. kafka的安装及基本使用

    1.安装zookeeper # 解压缩 [root@localhost zookeeper]# .tar.gz [root@localhost zookeeper]# zk_simple # 复制zo ...

  9. .NET Core 中间件

    中间件是一种装配到应用管道以处理请求和响应的软件. 每个组件: 1.选择是否将请求传递到管道中的下一个组件. 2.可在管道中的下一个组件前后执行工作. 请求委托用于生成请求管道. 请求委托处理每个 H ...

  10. Caused by java.lang.IllegalStateException Not allowed to start service Intent { cmp=com.x.x.x/.x.x.xService }: app is in background uid UidRecord问题原因分析(二)

    应用在适配Android 8.0以上系统时,会发现后台启动不了服务,会报出如下异常,并强退: Fatal Exception: java.lang.IllegalStateException Not ...