大家好，又见面了，我是全栈君。
//修改头像--开始//
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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/112020.html原文链接：https://javaforall.net
![【织梦插件】xenu软件-网站url和死链提取工具免费下载[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
