有了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. 【UVA11324】 The Largest Clique （Tarjan+topsort/记忆化搜索）

    UVA11324 The Largest Clique 题目描述 给你一张有向图 \(G\),求一个结点数最大的结点集,使得该结点集中的任意两个结点 \(u\) 和 \(v\) 满足:要么 \(u\) ...

  2. ubuntu->桌面版-常用设置

    1.目前使用unity桌面 ,使用Gnome,未来将会采用 Qt/QML 语言写的桌面 2.汉化 系统: 在 设置(setting)->语言支持(language support)->选择 ...

  3. PHP单表操作mysqli数据库类的封装

    class DB{ private $options=array( 'database_type' => 'mysql', 'database_name' => 'test', 'serv ...

  4. scikit-learn中predict_proba用法 (与predict的区别）

    predict_proba返回的是一个 n 行 k 列的数组, 第 i 行 第 j 列上的数值是模型预测 第 i 个预测样本为某个标签的概率,并且每一行的概率和为1. # conding :utf-8 ...

  5. netsh命令操作ipsec

    IPsec就是IP安全筛选,本可以在本地安全策略中的窗口上进行操作添加,那么netsh也可以支持命令行操作这部分的内容. 我们的示例是禁止IP地址为192.168.1.10访问财务部某机3389端口 ...

  6. [转] Vagrant入门

    [From] https://www.cnblogs.com/davenkin/p/vagrant-virtualbox.html 简单地说,Vagrant让我们可以通过代码的方式快速地.可重复地创建 ...

  7. MonoGame2D - MonoGame的2D威力加强版

    简介MonoGame2D 是一款基于MonoGame的扩展工具包,对MonoGame的2D开发方面进行了扩展,主要增加了精灵,字体,地图,组件,GUI等游戏开发中的一些基本元素,以更方便快捷地进行2D ...

  8. linux的yum报错

    yum makecache Loaded plugins: fastestmirror Could not retrieve mirrorlist http://mirrorlist.centos.o ...

  9. du及df命令的使用

    在本文中,我将讨论 du 和 df 命令.du 和 df 命令都是 Linux 系统的重要工具,来显示 Linux 文件系统的磁盘使用情况.这里我们将通过一些例子来分享这两个命令的用法. du 命令 ...

  10. sort sorted() reverse() reversed() 的区别

    sort()是可变对象(字典.列表)的方法,无参数,无返回值,sort()会改变可变对象,因此无需返回值.sort()方法是可变对象独有的方法或者属性,而作为不可变对象如元组.字符串是不具有这些方法的 ...