传统弱校HFUT的蒟蒻，真相只有一个

HTML 接收本地文件

HTML代码请把文件拖到下面的框里
触发drop事件
读取拖放的文件常用情况：
结合XMLHttpRequest和拖放文件实现上传
查看和管理本地文件和图片

<!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>

 

posted @ 2016-08-15 10:26  未名亚柳  阅读(257)  评论(0)  编辑  收藏  举报