jq Single image upload + preview

Achieve results:

 

 

html：

<section class="uploadingIDCard">
            <p>上传身份证</p>
            <ul class="IDCardImg">
                <li>
                    <div class="upload-header">
                        <span class="icon-tianjia iconfont"></span>
                        <input class="upload" type="file" accept="image/*">
                    </div>
                    <div class="img-box">
                    <! - store preview images -> 
                    </ div >

                    <div class="img-list">
                        <img src="${this.result}" alt="">
                    </div>
                </li>
                <li>
                        <div class="upload-header">
                            <span class="icon-tianjia iconfont"></span>
                            <input class="upload" type="file" accept="image/*">
                        </div>
                        <div class="img-box"> 
                        <! - store preview images -> 
                        </ div >

                        <div class="img-list">
                            <img src="${this.result}" alt="">
                        </div>
                    </li>
            </ul>
           <ul class="imgWord">
               <li>人面像</li>
               <li>国徽像</li>
           </ul>

        </section>

CSS：

 

.uploadingIDCard{
    width: 10rem;
    margin-top: .666667rem;
    background-color: #fff;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    padding:.266667rem .266667rem .4rem .266667rem;
    font-size: .466667rem;
    /* background-color:pink; */

}

.uploadingIDCard>ul{
    display: flex;
    margin-top: .266667rem;

}
.uploadingIDCard> .IDCardImg>li{
    width: 3.666667rem;
    height: 3.666667rem;
    border: 1px solid #dedede;
    border-radius: .2rem;
    position: relative;
}
.upload-header{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items:center;
    justify-content: center;

}
.upload-header>span{
    font-size: .666667rem;
    color: #dedede;
}

.upload{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    opacity: 0;
}
.img-box{
    width: 3.666667rem;
    height: 3.666667rem;
    /* background-color: bule; */
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 88;
}
.img-box img{
    width: 3.666667rem;
    height: 3.666667rem;

}
.uploadingIDCard> .IDCardImg>li:first-child{
    margin-right:.266667rem;
}
.imgWord{
    width: 10rem;
    /* background-color:red; */
    color: #4467a9;
}
.imgWord>li{
    width: 3.666667rem;
    text-align: center;
}

 

JS：

 

function UploadFunction (name) {
    this.name = name;
    this.init();
};
UploadFunction.prototype = {
    // 初始化
    init: function () {
        this.clickUpload();
        this.imgPreview();
    },
    flag: 0,
    filesList: [],
    // click Upload 
    clickUpload: function () {
         var that = the this ;
         var filesList = the this .filesList;
        $('.signBtn').on('click', function() {
            that.flag = 0;
            if (filesList.length > 0) {
                for (var i = 0; i < filesList.length; i++) {
                    that.upLoadMethod(filesList[i]);
                }
            };
        })
    },
    // preview image 
    imgPreview: function () {
         var that = the this ;
        $('.upload-header').on('change', '.upload', function(e) {
          var _this=this;
          $(_this).parent().next().html("");
            var files = e.target.files;
            // console.log(files);
            if (files.length > 0) {
                for (var i = 0; i < files.length; i++) {
                    var reader = new FileReader();
                    reader.onload = function () {
                        $(_this).parent().next().html($(_this).parent().next().html()+`
                        <div class="img-list">
                        <img src="${this.result}" alt="">
                      </div>
                        `)
                    };
                    reader.readAsDataURL(files[i]);
                    that.filesList.push(files[i]);
                };
            };
        })
    },
    // upload pictures 
    upLoadMethod: function (File) {
         var that = the this ;
         var formData = new new FormData ();
        formData.append('file', file);
        $.ajax({
            type: "post",
            URL: 'As used herein, upload the address / Upload' ,
            data: formData,
            mimeType: "multipart/form-data",
            dataType: "json",
            async: false,
            Cache: false , // upload the file does not need to cache 
            contentType: false , // must be set to false. Because FormData objects, and has been declared attribute = the enctype "multipart / form-Data" 
            the processData: to false , // should be set to false. Because the data values are FormData objects do not need to process the data 
            Success: function (Response) {
                that.flag += 1;
                if (that.flag === that.filesList.length) {
                    console.log ( 'I upload complete' );
                };
            },
            error: function (err) {
                the console.log ( 'failed to upload' );
            }
        });
    },
}
var UploadFunction = new new UploadFunction ( 'Upload ID');