头像预览功能:
前端来做:
1.什么时候触发:
input值发生变化的时候
技术点
- change事件
当标签值发生改变的时候触发.
2.var filereader = new FileReader();//创建读取对象
3.JQuery是异步的,需要加上onload,不然显示不出来预览
4.改变标签属性的函数attr
//找到头像的input标签,绑定change事件
$("#id_avatar").change(function () {
//读取选中的文件
var filereader = new FileReader();//创建读取对象
filereader.readAsDataURL(this.files[0]);//读取文件是需要事件的
//把文件放在img标签中,等上一步图片读完之后再进行下一步
filereader.onload = function () {
$(".label-img").attr("src",filereader.result);
}
})