JQ实现图片预览

实现图片预览在于修改图片的src，而且写成图片的本地路径是没有用的。

实现效果：

image.png

html部分：

<label for="avatar" class="col-sm-3 control-label">头像：</label>
<div class="col-sm-9" id="avatar">
    <img src="/static/img/guojia.jpg" alt="" id="avatar_img">
    <input type="file" class="form-control" id="avatar_file">
</div>

css部分：
通过绝对定位将默认图片和文件按钮重叠，并将文件按钮隐藏

#avatar{
    position: relative;
    width: 60px;
    height: 60px;
}

#avatar_img,#avatar_file{
    position: absolute;
    top: 0;
    left: 15px;
    width: 60px;
    height: 60px;
    border: 1px solid gray;
    border-radius: 5px;
}

#avatar_file{
    opacity: 0; 
}

jquery部分：
方式一：

//建立一个可存取到该file的url
function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

//图片预览
$("#avatar_file").on("change",function(){
    var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
    if (objUrl) {
        $("#avatar_img").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
    }
});

方式二：

//头像预览
$('#avatar_file').change(function () {
    var file = $(this)[0].files[0];
    //通过FileReader读取选中图片
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        //result中存放了选中的文件的二进制数据
        $('#avatar_img')[0].src = this.result
    }
});

JQ实现图片预览

推荐阅读更多精彩内容