HTML5拖放事件-上传图片预览功能

时间:2022-07-14 05:53:45

主要用到的知识点有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('请上传图片类型!');
}
}
}