上传图片文件预览功能 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
 
<form>
    <!----用一个label标签将上传文件输入框跟图片绑定一起，
          点击图片的时候就相当于点击了上传文件的按钮---->
    <label><img id="avatar-img" src="/static/img/default.png" width="80px" height="80px">
        <div>头像<input id="avatar-input" hidden type="file"></div>
    </label>
 
    <input id="submit-btn" type="button" value="提交">
</form>
 
<script src="/static/js/jquery-3.2.1.min.js"></script>
 
<script>
 
    // 上传文件按钮（label里的图片）点击事件
    $('#avatar-input').on('change',function () {
        // 获取用户最后一次选择的图片
        var choose_file=$(this)[0].files[0];
        // 创建一个新的FileReader对象，用来读取文件信息
        var reader=new FileReader();
        // 读取用户上传的图片的路径
        reader.readAsDataURL(choose_file);
        // 读取完毕之后，将图片的src属性修改成用户上传的图片的本地路径
        reader.onload=function () {
             $("#avatar-img").attr("src",reader.result)
        }
    });
 
</script>

 

posted @ 2019-05-21 10:53  he。  阅读(356)  评论(0)    收藏  举报