在桌面上创建了自定义的放置目标后，可以从桌面上把文件拖放到该目标。与拖放一张图片或链接类似，从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在event.dataTransfer.files中读取到被放置的文件，此时它是一个File对象，与通过文件输入字段取得的File对象一样。
例子：
请把文件拖到下面的框里：
<script type="text/javascript">
function dragHandle(event) {
var info = "",
outputEle = document.getElementById("output"),
files, i, len;
event.preventDefault();
if(event.type == "drop") {
files = event.dataTransfer.files;
i = 0;
len = files.length;
while(i < len) {
info += files[i].name + "( " + files[i].type + ", " + files[i].size + " bytes)
";
i++;
}
outputEle.innerHTML = info;
}
}
var dropTargetEle = document.getElementById("dropTarget");
dropTargetEle.addEventListener("dragenter", dragHandle, false);
dropTargetEle.addEventListener("dragover", dragHandle, false);
dropTargetEle.addEventListener("drop", dragHandle, false);
</script>
与其他拖放示例一样，这里也必须取消dragenter、dragover和drop的默认行为。
在drop事件中，可以通过event.dataTransfer.files读取文件信息。
读取拖放的文件的功能常用情景有：
结合XMLHttpRequest和拖放文件来实现上传。（最多）
查看和管理本地图片。
查看和管理本地音乐。
【html5读取本地文件】HTML5读取拖放的本地文件的例子
http://m.bbyears.com/wangyezhizuo/107797.html
推荐访问:html5教程 html5新特性 微博html5