你的位置:首页 > Java教程

[Java教程]HTML5 dataTransfer对象详解


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

FQ出去问了下谷歌找到了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>