上传图片前端js代码，前端即时显示

// 当文件被选择后触发 --- 改变事件
$('.input-file').change(function() {
    //检测到文件修改后，文件上传的逻辑
    //前端：1.获取到文件对象的信息
    var file=$(this)[0].files[0];
    //读取文件的内容
    var reader=new FileReader();
    //将读取到的内容设置到前端的头像框中显示
    reader.onload=function (event){
        //声明一个参数，用于接受文件的数据信息
        var data=event.target.result;
        //将文件的数据设置到头像框中
        // "avatar" 头像框中的class属性
        $(".avatar").attr("src",data);
    }
    //4.将文件的数据格式进行转换  转换为dataUrl格式
    reader.readAsDataURL(file);

    //后端：5.发送ajax请求，在后端进行文件的储存
    let file1=document.getElementById("file").files[0];
    //用于传输后端ajax请求
    let formData=new FormData();
    formData.append("file",file1);

    //发送ajax请求
    $.ajax({
        type:'post',
        url:'/information/uploadImg?userId=${sf.userId}',
        data:formData,
        dataType:'json',
        cache:false,
        contentType:false,
        processData:false,
        //成功后执行回调函数
        success:function (data){
            //回调函数
            readData(data);
        },
        error:function (){
            //失败：直接弹出失败提示框  （‘2’：失败图片），一秒后执行 layer_close（关闭弹出函数）
            layer.msg("图像上传失败",{icon:2,time:1000},function (){
                layer_close()
            })
        }
    })
});