首页 > 代码库 > HTML5拖放事件-上传图片预览功能（学习笔记）

HTML5拖放事件-上传图片预览功能（学习笔记）

2024-08-22 00:21:18   221人阅读

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

 

HTML5拖放事件-上传图片预览功能（学习笔记）


联系
我们