HTML 5拖拽預覽

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

開發(fā) 前端

代碼中先分別監(jiān)聽這幾個事件，取消瀏覽器默認的行為，然后利用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);  
        }  
          
        //設置頁面屬性，不執(zhí)行默認處理（拒絕被拖放）  
        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"> 
    文件預覽區(qū)，僅限圖片和txt文件  
    </div> 
</body> 
</html>

主要代碼解析

樣式部分就不說了，很簡單

dragover、dragend、drop是三個與拖拽相關的事件。

dragover表示被拖放的元素正在本元素范圍內(nèi)移動

dragend表示拖放操作結(jié)束

drop表示有其他元素被拖放到了本元素中

代碼中先分別監(jiān)聽這幾個事件，取消瀏覽器默認的行為，然后利用HTML5中的File及FileReader判斷讀取拖拽的文件。

如果文件是圖片，就用FileReader的readAsDataURL方法將圖片讀取為DataURL字符串存入內(nèi)存，并顯示在DIV中。

如果文件是txt文本，就用FileReader的readAsText方法將文件讀取為文本（默認為UTF-8格式），放到內(nèi)存中，然后顯示在DIV中。

原文地址：http://www.cnblogs.com/jscode/archive/2012/04/23/2467149.html

【編輯推薦】

HTML 5中的文件處理之FileAPI
HTML 5開發(fā)：地理位置定位指南
HTML 5實現(xiàn)3D迷宮
HTML 5 Canvas組件繪制太極圖案
一句代碼實現(xiàn)HTML 5淘寶語音搜索

責任編輯：張偉來源：菜鳥程序猿的博客

HTML5