JQuery 上传图片并展示

html

        <div>
            <span>照片</span>
            <label for="photo_file">
                <img src="img/jiahao2.jpg" alt="" id="photo_img" style="width: 80px;height: 80px">
            </label>
            <input type="text" id="photo" name="photo" hidden>
            <input type="file" onchange="showImg()" id="photo_file" style="display: none">
        </div>

js

function showImg(){
    var file =  document.getElementById("phone_file").files[0];
    var formData = new FormData();
    formData.append("img",file);
    //上传图片
    $.ajax({
        type:'post',
        url:'/uploadImg',
        data:formData,
        processData:false,//*
        contentType:false,//*
        success:function(data){
            // console.log(data);
            var data = $.parseJSON(data);
            if(data.code==1){
                $(`#${phone_img}`).attr("src", data.data.url);
                $(`#${photo}`).val(data.data.img_name);
            }else {
                alert(data.msg)
            }
        }
    })
}

上传之前先展示

function showImg(){
	  var r= new FileReader();
	  var file =  document.getElementById("phone_file").files[0];
	  r.readAsDataURL(file );
	  r.onload=function (e) {
	  	$(`#${phone_img}`).attr("src", this.result);
	  }
}