在桌面上创建了自定义的放置目标后,可以从桌面上把文件拖放到该目标。与拖放一张图片或链接类似,从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在event.dataTransfer.files中读取到被放置的文件,此时它是一个File对象,与通过文件输入字段取得的File对象一样。
例子:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #dropTarget {width: 200px; height: 200px; background: #ccc; border: 1px solid #999;} </style> </head> <body> <p>请把文件拖到下面的框里:</p> <div id="dropTarget"></div> <div id="output"></div> <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) <br>"; 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> </body> </html>
与其他拖放示例一样,这里也必须取消dragenter、dragover和drop的默认行为。
在drop事件中,可以通过event.dataTransfer.files读取文件信息。