html头像上传功能 |
您所在的位置：网站首页 › 上传头像照片是什么 › html头像上传功能 |
html头像上传功能
|
这是一个比较经典的案例，在编辑个人信息页面用的非常多，一个简单的个人信息表单如下图，功能是点击头像弹出文件选择窗口，只能选择一个文件，文件类型限制为图片格式，选择完毕把图片显示出来，点击保存信息把表单信息上传
html模板部分代码如下，img元素后面有一个隐藏的input file表单项，img的点击事件写在onclick里面，点击img会触发input file的click事件弹出文件选择窗口，也可以使用jquery绑定，如果不确定属性名称去w3school查找对应的文档，accept声明弹窗只展示图片文件 头像
姓名
手机号
邮箱
单位
选择完毕之后触发onChange事件，通过w3查找input file的文档拿到二进制文件对象files，这里要借助FileReader做转换，img元素不能加载二进制数据，把二进制数据转base64就可以了，用法也非常简单，因为包含文件对象提交的时候要包装成FormData，请求之后刷新一次网页 //选择文件完毕的回调 function inputFile(obj) { const file = obj.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { $("#avatar").attr("src", this.result); } } //提交表单数据 function saveInfo(){ //jquery对象转js对象 const avatarFile = $('btn-file')[0].files[0]; var form = new FormData(); form.append('name', $('#name').val()); form.append('avatar', avatarFile); form.append('mobile', $('#mobile').val()); form.append('unit', $('#unit').val()); form.append('email', $('#email').val()); postRequest("UpdateUserInfo", form, (result)=>{ location.reload(true) }) }功能比较简单，想学习前端的朋友，可以从这种小功能开始练手 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |