拖拽事件_4

window.onload=function  () {
    var oBox=document.getElementById("box");
    var oUl=document.getElementById("oUl");
    oBox.ondragenter=function  () {
        this.innerHTML="可是释放鼠标了";
    }
    oBox.ondragover=function(ev){
        var ev=ev||event;
        ev.preventDefault();
    }
    oBox.ondragleave=function  () {
        
        this.innerHTML="将文件拖拽到此区域 ";
    }
    oBox.ondrop=function  (ev) {
        var ev=ev||event;
        //释放图片文件的时候阻止浏览器打开图片
        ev.returnValue=false;
        ev.preventDefault();
        
        //ev.dataTransfer.files获取外部拖拽的文件，返回一个filesList列表
        //其length属性表明拖动的文件的个数
        //filesList下有个type属性，返回文件的类型

        var fs=ev.dataTransfer.files;
        //alert(fs.length);
        //alert(fs[0].type);
        for(var i=0;i<fs.length;i++){
            if(fs[i].type.indexOf("image")!=-1){//证明是图片文件
            //FileReader(读取文件信息)
            var  fd=new FileReader();
            //readAsDataURL 参数为要读取的文件对象，将文件读取为DataUrl 
             fd.readAsDataURL(fs[i]);
            // onload 当读取文件成功完成的时候触发此事件
             fd.onload=function  () {
                 //this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
                 //alert(this.result);
                 var oLi=document.createElement("li");
                 var oImg=document.createElement("img");
                 oImg.src=this.result;
                 oLi.appendChild(oImg);
                 oUl.appendChild(oLi);
              }

        }
            else{
                alert("亲，请上传图片类型")
            }
        }
        
        
    }
    
}

 

将文件拖拽到此区域

 

 

ev.dataTransfer.files获取外部拖拽的文件，返回一个filesList列表
其length属性表明拖动的文件的个数
filesList下有个type属性，返回文件的类型

FileReader(读取文件信息)
readAsDataURL
参数为要读取的文件对象，将文件读取为DataUrl
onload
当读取文件成功完成的时候触发此事件
this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据