js多图上传转码64

Posted 2020-11-03 mj-my

<div>
    <form action="/home/Uplod" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="image" multiple="multiple" onchange="fun(this)" />
        <input type="button" value="submit" id="submit" />
    </form>
</div>

<script type="text/javascript">
        var AllowImgFileSize = 2100000; //限制上传大小
        var tempbase = [];       //bas64数组
        $(function () {
            $("#submit").click(function () {
                console.log($("#image")[0].files.length)
                if ($("#image")[0].files.length < 1) {
                    alert("请最少选择一个图片")
                    return;
                }
                for (var i = 0; i < $("#image")[0].files.length; i++) {
                    if ($("#image")[0].files[i].size > AllowImgFileSize) {
                        alert("上传失败，请上传不大于2M的图片！");
                        return;
                    }
                }
                console.log(tempbase);
                console.log(tempbase[0]);
                
            })
        })

        function fun(obj) {
            var files = obj.files;
               tempbase = [];
               
//             var readFileAsync = file => new Promise(resolve => {
//                var reader = new FileReader();
//                reader.onload = evt => resolve(evt.target.result);
//                reader.readAsDataURL(file);
//             })
            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; j < files.length; j++) {
                readFileAsync(files[j]).then(function(res){
                    tempbase.push(res);
                });
              };
        }
        
        
    </script>