jq上傳單張圖片+預覽

實現效果：

 

 

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">
                    <!-- 存放預覽圖片 -->
                    </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">
                        <!-- 存放預覽圖片 -->
                        </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: [],
    // 點擊上傳
    clickUpload: function () {
        var that = this;
        var filesList = 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]);
                }
            };
        })
    },
    //預覽圖片
    imgPreview: function () {
        var that = 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]);
                };
            };
        })
    },
    //上傳圖片
    upLoadMethod: function (file) {
        var that = this;
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            type: "post",
            url: '這里使用上傳的地址/upload',
            data: formData,
            mimeType: "multipart/form-data",
            dataType: "json",
            async: false,
            cache: false, //上傳文件不需要緩存
            contentType: false, //需設置為false。因為是FormData對象，且已經聲明了屬性enctype="multipart/form-data"
            processData: false, //需設置為false。因為data值是FormData對象，不需要對數據做處理
            success: function (response) {
                that.flag += 1;
                if (that.flag === that.filesList.length) {
                    console.log('我上傳完成了');
                };
            },
            error: function (err) {
                console.log('上傳失敗');
            }
        });
    },
}
var UploadFunction = new UploadFunction('上傳身份證');