本文用到的知識(shí)

HTML5中的File及FileReader接口

相關(guān)資料：

Using files from web applications

File API

運(yùn)行效果

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

源碼

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        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;  
  
  
  
        }  
  
  
  
     
  
  
  
     
  
  
  
        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 = "
" + this.result + "
";  
  
  
  
                        dest.style.background = "white";  
  
  
  
                    }  
  
  
  
                }  
  
  
  
                else {  
  
  
  
                    dest.innerHTML = "暫不支持此類文件的預(yù)覽";  
  
  
  
                    dest.style.background = "white";  
  
  
  
                }  
  
  
  
            }, false);  
  
  
  
        }  
  
  
  
          
  
  
  
        //設(shè)置頁面屬性，不執(zhí)行默認(rèn)處理（拒絕被拖放）  
  
  
  
        document.ondragover = function(e){e.preventDefault();};  
  
  
  
        document.ondrop = function(e){e.preventDefault();}  
  
  
  
          
  
  
  
        window.onload=init;  
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
    
HTML5文件拖拽預(yù)覽Demo
 
  
  
  
     
  
  
  
    文件預(yù)覽區(qū)，僅限圖片和txt文件