JavaScript base64多图上传

<div>
    <form action="/home/Uplod" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="image" multiple="multiple" οnchange="_this.upload(this)" />
        <input type="button" value="submit" id="submit" οnclick="_this.subimt(document.getElementById('image'))" />
    </form>
</div>

<script type="text/javascript">
    $(function () {
        main.init();
    })
    var main={
        config:{
            AllowImgFileSize:2100000, //限制上传大小
            tempbase:[],       //bas64数组
        },
        init:function(){
            _this=this;
        },
        //提交
        subimt:function(obj){
            if (obj.files.length < 1) {
                alert("请最少选择一个图片")
                return;
            }
            for (let i = 0,len=obj.files.length;i <len; i++) {
                if (obj.files[i].size > _this.config.AllowImgFileSize) {
                    alert("上传失败，请上传不大于2M的图片！");
                    return;
                }
            }
            console.log(_this.config.tempbase);
            console.log(_this.config.tempbase[0]);
        },
        //上传
        upload:function(obj){
            //obj==doument.getElementById("image");
            var files = obj.files;
            //数组重置为空。
            _this.config.tempbase = [];
            function readFileAsync(file) {
                return new Promise(function (resolve) {
                    var reader = new FileReader();
                    reader.onload = function (evt) {
                        return resolve(evt.target.result);
                    };
                    reader.readAsDataURL(file);
                });
            };

            for (let j = 0,len=files.length; j <len; j++) {
                readFileAsync(files[j]).then(function(res){
                    _this.config.tempbase.push(res);
                });
            };
        },
    };
</script>

转载于:https://www.cnblogs.com/YAN-HUA/p/9020580.html