微客导航 » 文章资讯 » javascript头像上传代码实例

javascript头像上传代码实例

2023-08-13 05:30:04 296

上传头像：

相关关键词：

ondragover（拖动元素在投放区内移动）

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

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






上传头像图片




拖动外部图片或单击上传图片

/*css样式：*/
*{
margin:0;
padding:0;
}
.container{
width:50%;
margin:0auto;
height:400px;
padding:20px;
text-align:center;
}
.main{
width:200px;
height:200px;
border:2pxdashed#666;
margin:20pxauto;
position:relative;
}
.maininput{
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(){
//获取元素
varfile=document.querySelector("#file");
varaddImg=document.querySelector(".btn");
varmain=document.querySelector(".main");
//封装上传图片操作
functionupload(img){
//实例化一个图片对象
varimgFile=newFileReader();
//获取图片的路径
imgFile.readAsDataURL(img);
imgFile.onload=function(e){
//将上传图标设置为当前图片
addImg.src=e.target.result;

}
}
/*1.点击上传图片*/
file.onchange=function(e){
//获取上传图片里面的信息
varimg=e.target.files[0];
upload(img);
}
/*2、拖拽上传*/
main.ondragover=function(){
returnfalse;
}
main.ondrop=function(e){
upload(e.dataTransfer.files[0]);
returnfalse;
}
}

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

javascript头像上传代码实例

拖动外部图片或单击上传图片

热门推荐

随机推荐