主要用到的知识点有dataTransfer对象和FileReader(读取文件信息)
1、创建简单的HTML标签:
<body>
<div id="box">请将图片拖拽至此</div>
<ul></ul>
</body>
2、给标签加上简单的样式:
<style type="text/css">
div{
width: 300px;
height: 300px;
margin:100px;
background: orange;
}
</style>
3、编写JS,用到四个拖放事件中的4个目标元素事件
dragenter事件:进入目标元素触发,改变div的innerHTML值:
var oDiv = document.getElementById('box');
var oUl = document.getElementsByTagName('ul')[0]; oDiv.ondragenter = function(){
this.innerHTML = '可以释放啦';
}
dragover事件:进入目标、离开目标之间,连续触发;注意:为什么要在这里加上这个事件?因为后续要触发drop事件的时候需要在dragover阻止,默认事件:
oDiv.ondragover = function( ev ){
ev.preventDefault();
}
dragleaver事件:离开目标元素触发
oDiv.ondragleave = function(){
this.innerHTML = '请将图片拖拽至此';
}
drop事件:在目标元素上释放鼠标触发
dataTransfer对象里面有一个files属性:获取外部拖拽的文件,返回一个filesList列表;filesList下有个type属性,返回文件的类型
oDiv.ondrop = function( ev ){
ev.preventDefault();
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){ //利用返回的type属性值字符串包含image来判断文件类型 var fd = new FileReader(); //读取文件信息 fd.readAsDataURL( fs[i] ); //参数为读取的文件对象,将文件读取为DataURL fd.onload = function(){ //当读取文件成功完成的时候触onload事件
var oImg = document.createElement('img');
var oLi = document.createElement('li');
oImg.src = this.result; //获取文件的数据,当文件是图片,返回base64的图片数据
oLi.appendChild(oImg);
oUl.appendChild(oLi);
}
}else{
alert('请上传图片类型!');
}
}
}