HTML和JavaScript实现的头像上传功能及拖放效果示例

上传头像：

相关关键词：

ondragover(拖动元素在投放区内移动)

ondrop (元素放在投放区触发但是要去处理浏览器默认事件的影响：ondragenter、ondragover)

dataTransfer(它可以保存一项或多项数据、一种或多数数据类型，通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作)

上传头像图片

/* css样式： */

*{

margin: 0;

padding: 0;

}

.container{

width: 50%;

margin: 0 auto;

height: 400px;

padding: 20px;

text-align: center;

}

.main{

width: 200px;

height: 200px;

border: 2px dashed #666;

margin: 20px auto;

position: relative;

}

.main input{

width: 100%;

height: 100%;

opacity: 0;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

z-index: 11;

}

.main .btn{

width: 150px;

height: 150px;

cursor: pointer;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

/* js */

window.onload = function() {

// 获取元素

var file = document.querySelector("#file");

var addImg = document.querySelector(".btn");

var main = document.querySelector(".main");

// 封装上传图片操作

function upload(img) {

// 实例化一个图片对象

var imgFile = new FileReader();

// 获取图片的路径

imgFile.readAsDataURL(img);

imgFile.onload = function(e) {

// 将上传图标设置为当前图片

addImg.src = e.target.result;

}

}

/* 1.点击上传图片 */

file.onchange = function(e) {

// 获取上传图片里面的信息

var img = e.target.files[0];

upload(img);

}

/* 2、拖拽上传 */

main.ondragover = function() {

return false;

}

main.ondrop = function(e) {

upload(e.dataTransfer.files[0]);

return false;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。