有了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. css3 -webkit-filter

    -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支持的效果有: grayscale 灰度   ...

  2. flask.abort

    abort(status) status:标注状态码,和异常 抛出异常后会终止当前函数 使用errorhandler装饰器捕获abort异常 @app.errorhandler(500) def in ...

  3. 网络基础 01_OSI网际互联

    1 通信概述 网络是用物理链路将各个孤立的工作站或主机相连在一起,组成数据链路,从而达到资源共享和通信的目的. 通信是人与人之间通过某种媒体进行的信息交流与传递. 网络通信是通过网络将各个孤立的设备进 ...

  4. js 删除数组的某一项或者几项的方法

    1.arr.splice() splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

  5. SpringCloud---消息驱动的微服务---Spring Cloud Stream

    1.概述 1.1 Spring Cloud Stream:用来   为微服务应用   构建   消息驱动能力的框架: 可基于SpringBoot来创建独立.可用于生产的Spring应用程序: 使用Sp ...

  6. Git修改文件

    如果我们修改了本地的某个文件但是没有提交,这时我们用 $ git status可以看到提示,例如我在readme2.txt里面新加了一行,然后查看状态: git status命令可以让我们时刻掌握仓库 ...

  7. mysql Access denied for user root@localhost错误解决方法总结

    原文:http://www.111cn.net/database/mysql/44142.htm Access denied for user 'root'@'localhost' (using pa ...

  8. app唤起的完美解决方案，及阻止浏览器的默认弹窗行为

    https://stackoverflow.com/questions/10237031/how-to-open-a-native-ios-app-from-a-web-appvar frame = ...

  9. 看一段Delphi导出到Word的源代码

    procedure TFrmWeekAnalysisQry.BtnExportToExcelClick(Sender: TObject);var wordApp,WordDoc,WrdSelectio ...

  10. github 相关操作知识

    新设备上使用github 1.要在本地创建一个ssh key ssh-keygen -t rsa -C "email address" 2.界面提示进入.ssh文件夹下,找到id_ ...