前端效果实现：修改头像预览

本文实现效果图如下：

1.点击页修改头像组件（图1）

   

2、弹出修改头像模态框

. 

3.点击 选择文件 input[file] 元素，选择文件，显示预览头像

    

4.点击上传，实现修改头像预览效果并上传的功能

html:

<form id="form-avatar" enctype="multipart/form-data" style="margin:15px;">
    <input id="avatar_file" type="file" style = "margin-left:auto;margin-right:auto;" accept="image/*" name="avatar" style="
          "> 
    <img id="avatar_img" style="display:none;height: 85px;width: 150px;border-radius: 50%;margin-right: 20px;">
    <input style="position:relative;margin-top: 40px;background-color: #36f;border: none;" type="submit" class="btn btn-success" value="上传">
    <span id = "tip-msg" style="padding-top: 20px;"> </span>
    <input id="reset-data" type="reset" value="Reset" style="display: none" />
</form>

js（这里只涉及预览效果实现，至于上传—ajax表单提交，模态框——bootstrap在这里都不做代码展示）：

$("#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_file").hide()
            $("#avatar_img").attr("src", this.result).show(); //avatar_img  img标签的ID
        }
});