layui多图上传并压缩

2023-04-08 11:27:45
<form id="jxForm" method="post">
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal"
                id="testList">选择多文件
        </button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-xs8 " style="border:0px solid red">
            <div class="layui-inline" style="margin-top: 8px;margin-left: 110px;">
                <div class="layui-input-inline">
                    <button class="layui-btn  layui-btn-warm"
                            lay-submit="" lay-filter="baocun">
                        立即添加
                    </button>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="id" name="id" value="">
</form>
    layui.use(['form', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'tableSelect'], function () {
            var laydate = layui.laydate //日期
                , layer = layui.layer //弹层
                , upload = layui.upload //上传
                , form = layui.form
                , table = layui.table

            var files = {};
            upload.render({
                elem: '#testList',
                url: '',
                accept: 'file',
                multiple: true,
                auto: false,
                //bindAction : '#submit',
                choose: function (obj) {
                    obj.preview(function (index, file, result) {
                        _dealFileBase64(result, file, function (fileCallBack) {
                            if ("image/jpeg" == file.type) {
                                //读取本地文件
                                files[index] = fileCallBack;
                                var tr = $([
                                    '<tr id="upload-' + index + '">',
                                    '<td> ' + fileCallBack.name + '</td>',
                                    '<td>' + (fileCallBack.size / 1014).toFixed(1) + 'kb</td>',
                                    '<td>等待上传</td>',
                                    '<td>',
                                    '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                                    '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                                    '</td>',
                                    '</tr>'
                                ].join(''));
                                //单个重传
                                tr.find('.demo-reload').on('click', function () {
                                    obj.upload(index, fileCallBack);
                                });
                                //删除
                                tr.find('.demo-delete').on('click', function () {
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    // uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                                });
                                demoListView.append(tr);
                            } else {
                                files[index] = file;
                                var tr = $([
                                    '<tr id="upload-' + index + '">',
                                    '<td> ' + file.name + '</td>',
                                    '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>',
                                    '<td>等待上传</td>',
                                    '<td>',
                                    '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                                    '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                                    '</td>',
                                    '</tr>'
                                ].join(''));

                                //单个重传
                                tr.find('.demo-reload').on('click', function () {
                                    obj.upload(index, file);
                                });
                                //删除
                                tr.find('.demo-delete').on('click', function () {
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                                });
                                demoListView.append(tr);
                            }
                        });
                    });
                },
                error: function (index, upload) {
                    var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });

            form.on('submit(baocun)', function (data) {

                layer.msg('上传中...', {icon: 16, shade: 0.3, time: 0});
                var form = new FormData(document.getElementById("jxForm"));
                for (let i in files) {
                    form.append('file[]', files[i]);
                }

                $.ajax({
                    type: "post",
                    url: "../../order/xxxxxxx",
                    data: form,
                    contentType: false,
                    processData: false,
                    success: function (rst) {
                        if (rst.code == 0) {
                            parent.$("#jsonMediaIds").val(JSON.stringify(rst.data));
                            layer.msg(rst.msg, {time: 1000}, function () {
//                            jxRefresh();
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            });
                        } else {
                            layer.msg(rst.msg, {time: 1000}, function () {
                            });
                        }
                    }
                });
                return false;
            });
        });


    function _processData(dataUrl, type) {
        var binaryString = window.atob(dataUrl.split(',')[1]),
            arrayBuffer = new ArrayBuffer(binaryString.length),
            intArray = new Uint8Array(arrayBuffer);
        for (var i = 0, j = binaryString.length; i < j; i++) {
            intArray[i] = binaryString.charCodeAt(i);
        }

        var data = [intArray], blob;

        try {
            blob = new Blob(data);
        } catch (e) {
            window.BlobBuilder = window.BlobBuilder ||
                window.WebKitBlobBuilder ||
                window.MozBlobBuilder ||
                window.MSBlobBuilder;
            if (e.name === 'TypeError' && window.BlobBuilder) {
                var builder = new BlobBuilder();
                builder.append(arrayBuffer);
                blob = builder.getBlob(type);
            } else {
                _showTip('版本过低,不支持图片压缩上传');
            }
        }
        return blob;
    }

    //转换为Base64 并调用 压缩方法
    function _dealFileBase64(image_base64, file, callback) {
        //判断文件是不是图片
        if ("image/jpeg" == file.type) {
            var obj = 0.5;
            var img = new Image();
            img.src = image_base64;
            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);

                //生成canvas
                var canvas = document.createElement('canvas'),
                    ctx = canvas.getContext('2d');
                canvas.width = w;
                canvas.height = h;
                ctx.drawImage(that, 0, 0, w, h);

                // 默认图片质量为0.7
                var quality = 0.7;
                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                    quality = obj.quality;
                }

                // 回调函数返回base64的值
                var base64 = canvas.toDataURL('image/jpeg', quality);
                var bl = _processData(base64, file.type);
                var _file = new File([bl], file.name, {type: file.type})
                callback(_file);
            }
        } else {
            callback(file);
        }
    }

 

  • 作者:Mr_ZhangAdd
  • 原文链接:https://blog.csdn.net/Mr_ZhangAdd/article/details/116271116
    更新时间:2023-04-08 11:27:45