HTML 5拖拽預覽

作者：菜鳥程序猿 2012-04-24 09:48:49

開發前端

代碼中先分別監聽這幾個事件，取消瀏覽器默認的行為，然后利用HTML5中的File及FileReader判斷讀取拖拽的文件。注意，只能拖拽圖片和txt

本文用到的知識

HTML5中的File及FileReader接口

相關資料：

Using files from web applications

File API

運行效果

注：大家把自己電腦上的圖片或txt文件拖到上面的DIV中即可看到效果

源碼

<!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();  
          
                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>