html头像上传功能

这是一个比较经典的案例，在编辑个人信息页面用的非常多，一个简单的个人信息表单如下图，功能是点击头像弹出文件选择窗口，只能选择一个文件，文件类型限制为图片格式，选择完毕把图片显示出来，点击保存信息把表单信息上传

html模板部分代码如下，img元素后面有一个隐藏的input file表单项，img的点击事件写在onclick里面，点击img会触发input file的click事件弹出文件选择窗口，也可以使用jquery绑定，如果不确定属性名称去w3school查找对应的文档，accept声明弹窗只展示图片文件

<div class="form">
	<div class="item">
		<lable class="label">头像</lable>
		<img src="./img/default.png" id="avatar" onclick="$(this).next().click();"
			onerror="this.src='./img/default.png'">

		<input type="file" id="btn-file" onchange="inputFile(this)" accept="image/*">
	</div>
	<div class="item">
		<lable class="label">姓名</lable>
		<div class="input-block">
			<input type="text" class="input" id="name">
		</div>
	</div>
	<div class="item">
		<lable class="label">手机号</lable>
		<div class="input-block">
			<input type="number" class="input" id="mobile">
		</div>
	</div>
	<div class="item">
		<lable class="label">邮箱</lable>
		<div class="input-block">
			<input type="text" class="input" id="email">
		</div>
	</div>
	<div class="item">
		<lable class="label">单位</lable>
		<div class="input-block">
			<input class="input" value="" id="unit">
		</div>
	</div>
</div>

选择完毕之后触发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)
                })
        }

 功能比较简单，想学习前端的朋友，可以从这种小功能开始练手