zoukankan      html  css  js  c++  java
  • JS图片多个上传,并压缩为Base64

    首先是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;
                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;
                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;
                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;
                160px;
                height:130px;
                opacity:0;
            }
    

      JS代码

       var userAgent = navigator.userAgent; //用于判断浏览器类型
    
                $(".file").change(function () {
                    //获取选择图片的对象
                    var cou = $('.imageDiv').length
                    console.log(cou)
                    var docObj = $(this)[0];
                    var picDiv = $(this).parents(".picDiv");
    
                    var fileList = docObj.files;
                    console.log(fileList)
                    console.log(fileList.length)
                    console.log(picDiv)
                    //循环遍历
                    for (var i = 0; i < fileList.length; i++) {
                        //动态添加html元素
                        var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
                        picDiv.prepend(picHtml);
                        //获取图片imgi的对象
                        var imgObjPreview = document.getElementById("img" + fileList[i].name);
                        if (fileList && fileList[i]) {
                            formData.append("file", docObj.files[i]);
                            
    
                            //图片属性
                            imgObjPreview.style.display = 'block';
                            imgObjPreview.style.width = '160px';
                            imgObjPreview.style.height = '130px';
                            //imgObjPreview.src = docObj.files[0].getAsDataURL();
                            //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要以下方式
                            if (userAgent.indexOf('MSIE') == -1) {
                                //IE以外浏览器
                                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
                                
                                console.log(docObj.files[i]);
    
                                // var msgHtml = '<input type="file" id="fileInput" multiple/>';
                            } else {
                                //IE浏览器
                                if (docObj.value.indexOf(",") != -1) {
                                    var srcArr = docObj.value.split(",");
                                    imgObjPreview.src = srcArr[i];
                                    console.log(srcArr[i]);
    
                                } else {
                                    imgObjPreview.src = docObj.value;
                                }
                            }
                        }
    
    
                    }
    
                   
                    $('#fliei1').click(function () {
                        console.log($(".file").files)
                    })
    
                    /*删除功能*/
                    $(".delbtn").click(function () {
                        var _this = $(this);
                        _this.parents(".imageDiv").remove();
                    });
                });
            })
    

      效果

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

     

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

       function dealImage(path, obj) {
                var img = new Image();
                img.src = path;
                img.onload = function () {
                    var that = this;
                    var w = that.width,
                        h = that.height,
                        scale = w / h;
                    w = obj.width || w;
                    h = obj.height || (w / scale);
                    var quality = 0.85; //压缩质量 1是不压缩
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);
                    ctx.drawImage(that, 0, 0, w, h);
                    if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                        quality = obj.quality;
                    }
                    var base64 = canvas.toDataURL('image/jpeg', quality);
                    //最后返回压缩后的base64编码
                    console.log(base64)
                }
            }
    
    
    
    
    

                  var imgReaderI = new FileReader();
                   //转换base64编码 imgReaderI.readAsDataURL(docObj.files[i]); console.log(imgReaderI) var size=docObj.files[i].size imgReaderI.onloadend = function (evt) { //压缩 dealImage(this.result, { 180 }); } }

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

      

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

  • 相关阅读:
    node
    github
    [模块] pdf转图片-pdf2image
    python 15 自定义模块 随机数 时间模块
    python 14 装饰器
    python 13 内置函数II 匿名函数 闭包
    python 12 生成器 列表推导式 内置函数I
    python 11 函数名 迭代器
    python 10 形参角度 名称空间 加载顺序
    python 09 函数参数初识
  • 原文地址:https://www.cnblogs.com/ruogu/p/11232780.html
Copyright © 2011-2022 走看看