JS图片多个上传，并压缩为Base64

淡淡的烟草味﹌ 2023-10-11 13:12 33阅读 0赞

首先是JS 批量上传

HTML

<div id="Pic_pass">
                <p style="font-size: 20px;font-weight: bold;">请上传照片 </p>
                <p><span style="color: red">注：最多可以传3张</span></p>
                <div class="picDiv">
                    <div class="addImages">
    
                        <input type="file" class="file" id="fileInput" multiple="" accept="image/png, image/jpeg, image/gif, image/jpg">
                        <div class="text-detail">
                            <span>+</span>
                            <p>点击上传</p>
                        </div>
                    </div>
                </div>
            </div>

样式

.imageDiv {
                display:inline-block;
                width:160px;
                height:130px;
                -webkit-box-sizing:border-box;
                -moz-box-sizing:border-box;
                box-sizing:border-box;
                border:1px dashed darkgray;
                background:#f8f8f8;
                position:relative;
                overflow:hidden;
                margin:10px
            }
    
            .cover {
                position:absolute;
                z-index:1;
                top:0;
                left:0;
                width:160px;
                height:130px;
                background-color:rgba(0,0,0,.3);
                display:none;
                line-height:125px;
                text-align:center;
                cursor:pointer;
            }
            .cover .delbtn {
                color:red;
                font-size:20px;
            }
            .imageDiv:hover .cover {
                display:block;
            }
            .addImages {
                display:inline-block;
                width:160px;
                height:130px;
                -webkit-box-sizing:border-box;
                -moz-box-sizing:border-box;
                box-sizing:border-box;
                border:1px dashed darkgray;
                background:#f8f8f8;
                position:relative;
                overflow:hidden;
                margin:10px;
            }
            .text-detail {
                margin-top:40px;
                text-align:center;
            }
            .text-detail span {
                font-size:40px;
            }
            .file {
                position:absolute;
                top:0;
                left:0;
                width:160px;
                height:130px;
                opacity:0;
            }

JS代码

效果

![797834-20190723162715943-381720135.png][]

但是图片都是没有压缩的 、

本来JS 是没有办法压缩的 但是H5的画布可以 可以用画布压缩

有一点 docObj.files\[i\] 这个表示选择的图片可以传到后台直接保存 但是没有压缩。

![797834-20190723164419589-186129391.png][]

1个1.9M 压缩过后28.2K 还是特别客观的 接下来 我们就可以吧这个字符串通过AJAX方式传入后台。进行保存或者直接放入数据库，下一篇 我会写后台保存方法MVC 保存到服务器 返回相对路径

转载于:https://www.cnblogs.com/ruogu/p/11232780.html

[797834-20190723162715943-381720135.png]: https://img2018.cnblogs.com/blog/797834/201907/797834-20190723162715943-381720135.png
[797834-20190723164419589-186129391.png]: https://img2018.cnblogs.com/blog/797834/201907/797834-20190723164419589-186129391.png