在桌面上创建了自定义的放置目标后,可以从桌面上把文件拖放到该目标。与拖放一张图片或链接类似,从桌面上把文件拖放到浏览器中也会触发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读取文件信息。

读取拖放的文件的功能常用情景有:

  • 结合XMLHttpRequest和拖放文件来实现上传。(最多)
  • 查看和管理本地图片。
  • 查看和管理本地音乐。
本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/html/932