form表单格式把上传的图片传给后台 上传图片可删除

话不多说直接上代码（不过只是其中的一段核心代码块）
html

        <div class="chuans">
            <form class="uploadImg" enctype="multipart/form-data" method="POST">
                <input class="file1" type="file" name="file1" id="file1" >
            </form>
            
            <div>
                <img class="upimg" src="__INDEX__/img/ins/chuanzhenm.png" alt="" data-imgsrc="__INDEX__/img/ins/chuanzhenm.png">
                <span class="delx Hui-iconfont"></span>                
            </div>

        </div>

js

    $("body").on("change","div.chuans input.file1",function(){

        var reads = new FileReader();
        var f = $(this).get(0).files[0];
        console.log(f)
        var rep = /jpeg|png|gif|bmp/ig;
        var gstyle = f.type.split("/")[1];
        if(rep.test(gstyle)){
            reads.readAsDataURL(f);
            var that = this;
            reads.onload = function(e) {
                $('.upimg').attr("src",this.result)
                $('.delx').show();
            };
        }else{
            layer.msg("图片格式不正确，请上传 jpeg|png|gif|bmp 格式的图片")
        }
        $('.file1').val('')
        var formDate = new FormData();
        formDate.append("file", f);
        console.log(f)
        $.ajax({
            url: '上传图片的接口',
            type: "POST",
            data: formDate,
            processData: false,
            contentType: false,
            success: function(data) {
                data = JSON.parse(data)
                imageUrl = data[0].prefix + '' + data[0].smallUrl;
                console.log(data[0].prefix)
            }
        })

    });
//删除图片
    $("body").on("click","span.delx",function(){
        var odatasrc = $(this).parents(".chuans div").find("img").data("imgsrc");
        var osrc =  $(this).parents(".chuans div").find("img").attr("src");
        $(this).parents(".chuans div").find("img").attr("src",odatasrc);
        $(this).hide();
        $(this).parents(".chuans div").find("input").val("");
    });