大家好，又见面了，我是全栈君。
//修改头像--开始//
let btn = document.querySelector('#avatarImage')
let file = document.querySelector('#newuploadAvatar')
btn.onclick = function() {
file.click() // 调取系统选择图片的弹框
}
// 监听input的file变化值
file.onchange = function (event) {
let file = event.target.files[0]
upload(file)
}
function upload(file) {
let xhr = new XMLHttpRequest()
xhr.open('post', 'updateavatar', true)
let formData = new FormData()
formData.set('filename', file)
xhr.send(formData)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('success')
}
}
}
//修改头像--结束//html部分:
<div class="avatar__edit">
<img id="avatarPreloader" src="__IMG__/preload.svg">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path d="M0 9.002v2.368h2.368l6.986-6.985-2.37-2.37zm11.185-6.45a.63.63 0 0 0 0-.891L9.707.185a.63.63 0 0 0-.891 0L7.66 1.34l2.37 2.37 1.156-1.156z"
fill="#383E45" fill-rule="evenodd"/>
</svg>
<!-- <label for="newuploadAvatar">-->
<img id="avatarImage" src="{$user.headimg|default='__IMG__/avatarImage.png'}" width="110" height="110">
<!-- </label>-->
</div>
<input type="file" id="newuploadAvatar" style="opacity: 0;" accept="image/png, image/jpeg, image/gif, image/jpg" data-max-size="2048" >
参考:https://juejin.im/post/5aa01068f265da23970669ce
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/112020.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
