jquery 上传图片，并显示本地图片，并ajax提交接口

第一步

<div class="item i1">
					<label>
						<input type="file" class="file1">
						<span>上传身份证</span>
					</label>
				</div>
				
				<input type="hidden" name="cardPicPath">

第二步

图片上传，并显示图片

$('.file1').change(function(e){
	var file = e.target.files[0]
	
	var reader = new FileReader();
	    // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
	    reader.addEventListener("load", function () {
	        let src = reader.result;
			console.log(src)
			// 把图片显示在label背景里面
			$('.item.i1 label').css('background-image','url('+ src +')')
	        }, false);
	      // 调用reader.readAsDataURL()方法，把图片转成base64
	      reader.readAsDataURL(file);
		  
	console.log(e)
	var fd = new FormData()
	fd.append('files',file)
	ajaxImg(fd,1)
})

第三步

图片通过接口保存到服务器

function ajaxImg(data) {
    $.ajax({
        url:'接口url',
        dataType: "json",
        async: false,
        processData: false,
        contentType: false,
        data: data,
        method: "POST",
        success(res) {
            var url = res.data.url // 返回的图片地址

	    $("[name='cardPicPath']").val(url) // 更新到文本框

        },
        error(err) {
            console.log(err)
        }
    })
}