上传头像实现预览功能

 <div class="layui-form-item">
                        <label  class="layui-form-label">
                            <span class="x-red">*</span>商品缩略图
                        </label>
                        <div class="layui-input-inline">
                            <div class="site-demo-upbar">
                                <input type="file"  name="gPicture" id="gPicture"/>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item imgs" id="imgshow">
                        <label  class="layui-form-label">缩略图展示
                        </label>
                        <img src="images" id="pimages" name="pimages" style="width: 400px;height: 200px;"/>
                        <!--<input id="avatar"  name="image" type="hidden"  value="images">-->
                    </div>

//页面加载完成后
$(function () {

    var file=document.getElementById("gPicture");
    //添加onchange事件
    file.onchange=function () {
    	//创建新元素，用以替换原来的图片
        var img=document.createElement("img");
        img.src=window.URL.createObjectURL(file.files[0])
        img.onload=function(){
            window.URL.revokeObjectURL(this.src)
        }
        //获取图片路径
        var newSrc=img.src;
        //输出图片
        $("#pimages").attr("src",newSrc);
    }
});