javascript头像上传代码实例
上传头像:
相关关键词:
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。