window.οnlοad=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.οnlοad=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格式的图片数据