jq中使用input type=file上传单个文件并且显示图片路径

我来打个样

效果图

如果上传成功显示图片名称点击❌可以做到删除，重新生成按钮
开始--------------------代码-------------------👇

//上传图片的按钮根据需求自行设置
 <input  type="file" accept="image/*" onchange="xmTanUploadImg(this)"></div>
//删除按钮事件
<td class="tab_item_td"><span class="tabl_td_input get delete_btn honor">删除</span></td>
// ---------------------删除按钮事件------------------------------
 $(".delete_td1").on('click', function () {
   $(this).hide()
    $(this).parent().html(
        '<div class="btn_input">' +
        '<span>上传</span>' +
        '<input type="file" accept="image/*" οnchange="xmTanUploadImg(this)"></div>'
    )
})

//---------------------上传图片的事件-------------------------------
function xmTanUploadImg(obj) {
    var a_obj = obj;
    var fd = new FormData();
    var file = obj.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    var fileName = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
    if (file.size >= 1024 * 1024 * 2) {
        top.layer.msg("上传图片大小不得超过2M");
        return false;
    }
    //判断上传文件格式
    if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif" && fileName != "bmp") {
        top.layer.msg("请选择图片格式文件上传(jpg,png,jpeg,gif,bmp)！");
        return false; //阻止submit提交
    }
    reader.onloadstart = function (e) { //开始读取文件
    };
    reader.onprogress = function (e) {
        //这个是定时触发的事件，文件较大的时候较明显
        console.log(e)
    };
    reader.onabort = function () {
        console.log('abort'); //用作取消上传功能
    };
    reader.onerror = function () {
        console.log('error'); //文件读取出错的时候触发，暂模拟不出
    };
    reader.onload = function (e) { //成功读取文件
       //如果后台接受的是base64 则在里面进行转换
       console.log(reader.result);
    };
    fd.append("file", file);
    $.ajax({
        url: '后台地址',
        /*接口域名地址*/
        type: 'post',
        data: fd,
        contentType: false,
        processData: false,
        success: function (res) {
	       //等上传成功之后在这里面进行修改把按钮演示替换成需求的样式
        }
    })
}