图片上传前本地显示

<input id="upload_id" type="file" name="photoimage" class=""  />

<div id="picture_id" >
<img src="" id="preview_id" style="max-width:100px;max-height:100px;">
</div>

$("#upload_id").on("change", function(){
        var f=document.getElementById('upload_id').files;
        console.log(f);
        if(f.length>0){
            if (!/^image/.test( f[0].type)){
                console.log("图片格式不正确");//判断f的图片格式是什么
                return;
            }
            if(f[0].size>1024*1024){
                console.log("图片大小不能超过1M");//判断f的图片格式是什么
                return;
            }
            $("#picture_id").show();
            var r= new FileReader();
            r.readAsDataURL(f[0]);
            r.onload=function (e) {
                document.getElementById('preview_id').src=this.result;
            };
        }else{
            $("#picture_id").hide();
            document.getElementById('preview_id').src="";
        }
        
    });