html 上传头像前预览以及点击头像去选择和更换头像

一般情况我们在html上传图片时都是通过input[file]选择图片，但是选择后并不能预览。今天碰到这样一个需求，先看图：

需求是：

1.选择图片不是点击input[file]，而是点击用户图片

2.选择图片后，在头像位置进行图片预览

 

思路：img标签显示头像，input[file]标签（隐藏）选择图片。点击img相当于点击input[file]，选择好图片后给img的src赋值

 

需求1的解决方法：将input[file]隐藏，给图片添加点击事件，在图片的点击事件中主动触发input[file]的点击事件。

function imageOnClick(){
    document.getElementById('my_photo').click();//my_photo隐藏的input[file]的id
}

需求2的解决方法：选择图片后获取文件对象的url，赋值给图片的src

// 头像预览
$("#avatar_file").change(function () {//avatar_file  input[file]的ID
    // 获取上传文件对象
    var file = $(this)[0].files[0];
    // 读取文件URL
    var reader = new FileReader();
    reader.readAsDataURL(file);
    // 阅读文件完成后触发的事件
    reader.onload = function () {
        // 读取的URL结果：this.result
        $("#avatar_img").attr("src", this.result);//avatar_img  img标签的ID
    }
});

这样通过点击头像就可以选择图片，并且选择好图片后达到预览的效果。