有了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 aDOMStringListlisting the formats that were set in thedragstart 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 aFileListof 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>
新闻热点
疑难解答
