HTML5之文件拖拽

將HTML5中的文件拖拽封裝成了類

    drag.js:


document.write("<script language='javascript' src='utility.js'></script>");  

////  
//要放在哪個容器，容器的ID  
////  
function FileDrager(cntId){  
this.containerId = cntId;  
}  

FileDrager.prototype = {  

// 判斷是否圖片  
isImage : function(type) {  
            switch (type) {  
            case 'image/jpeg':  
            case 'image/png':  
            case 'image/gif':  
            case 'image/bmp':  
            case 'image/jpg':  
                return true;  
            default:  
                return false;  
            }  
},  

////初始化  
Init : function(){  
    ////獲得放圖片的容器  
    var ctn = $(this.containerId);  

ctn.addEventListener('dragover',  function(evt) {  
            evt.stopPropagation();  
            evt.preventDefault();  
        }, false);  


ctn.addEventListener('drop', function(e) {  

e.stopPropagation();  
e.preventDefault();  

var fileList  = e.dataTransfer.files,　　//獲取拖拽文件  
oImg = document.createElement('img'),  
reader = new FileReader();  

var c = ctn;  
var x = e.clientX;  
var y = e.clientY;  


reader.onload = function(evt) {  
oImg.src = this.result;  

oImg.style.position = "absolute";  
oImg.style.left = x;  
oImg.style.top = y;  

c.appendChild(oImg);  
}  
reader.readAsDataURL(fileList[0]);  

}, false);  

}  


}  </pre>