HTML5之文件拖拽

时间:2017-01-03
简介:WEB前端|将HTML5中的文件拖拽封装成了类。drag.js: document.write("<script language='javascript'

将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);  
   
}     
   
}

TAGS:HTML5文件拖拽

上一编:html5拖放详解

下一编:怎样才能高效学习HTML5前端开发?

NewHot手机版