HTML 5拖拽预览-html拖拽布局生成页面

本文用到的知识

HTML5中的File及FileReader接口

相关资料：

运行效果

注：大家把自己电脑上的图片或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>

主要代码解析

样式部分就不说了，很简单

dragover、dragend、drop是三个与拖拽相关的事件。

dragover表示被拖放的元素正在本元素范围内移动

dragend表示拖放操作结束

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

代码中先分别监听这几个事件，取消浏览器默认的行为，然后利用HTML5中的File及FileReader判断读取拖拽的文件。

如果文件是图片，就用FileReader的readAsDataURL方法将图片读取为DataURL字符串存入内存，并显示在DIV中。

如果文件是txt文本，就用FileReader的readAsText方法将文件读取为文本（默认为UTF-8格式），放到内存中，然后显示在DIV中。

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

【编辑推荐】