Layui上传多图片并限制图片分辨率示例代码

墨蓝 2022-01-23 07:35 402阅读 0赞

### 话不多说，如标题  直接上代码 ###

### HTML代码 ###

<div class="layui-form-item">
            <label class="layui-form-label" style="width: 150px">冒泡推送首页大海报:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList2">选择多文件</button>
                <button type="button" class="layui-btn" id="testListAction2">开始上传</button>
                <span style="font-size: 16px;color: red">文件最大:2M;请记得点击开始上传</span>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>预览</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList2"></tbody>
                    </table>
                </div>
            </div>
    
        </div>

### JS代码 ###

var posterWidth = 1280, posterHeight = 720;
            var flag = true;
            //大海报多文件列表示例
            var demoListView2 = $('#demoList2')
                , uploadListIns = upload.render({
                elem: '#testList2'
                , url: '/workbench/plan/upload2'
                , accept: 'file'
                , multiple: true
                , auto: false
                , size: 2048
                , bindAction: '#testListAction2'
                , choose: function (obj) {
                     flag = true;
                    if ($('#status_id').val() == '30') {
                        top.layer.alert("当前活动为返单,不允许更改")
                        return;
                    }
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function (index, file, result) {
    
                        var img = new Image();
                        img.onload = function () {
                            console.log('choose poster', img.width, img.height);
                            if (posterWidth == img.width && posterHeight == img.height) {
                                $('#upload_poster_preview').attr('src', result); //图片链接（base64）不支持ie8
                                // obj.upload(index, file);
                            } else {
                                layer.msg('海报尺寸必须为：' + posterWidth + 'px  ' + 'x' + posterHeight + 'px,请删除再次上传');
                                flag = false;
                            }
                        };
                        if (!flag) {
                            return false;
                        }
    
                        img.src = result;
    
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td>' + file.name + '</td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>等待上传</td>'
                            , '<td ><img name="image2"  src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></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 值，以免删除后出现同名文件不可选
                        });
    
                        demoListView2.append(tr);
                    });
                },before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
    
                    if (!flag) {
                        layer.msg('海报尺寸必须为：' + posterWidth + 'px  ' + 'x' + posterHeight + 'px,请删除再次上传');
                        this.error(index, upload);
                        return false;
                    }
                }
                , done: function (res, index, upload) {
    
                    if (res.code == 0) { //上传成功
    
                        var inputVal = document.getElementById("imgInput2").value;
                        var valData = "";
                        if (inputVal) {
                            valData = inputVal + "," + res.dataname;
                        } else {
                            valData = res.dataname;
                        }
                        document.getElementById("imgInput2").value = valData;
                        console.log(valData);
    
                        var tr = demoListView2.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                , error: function (index, upload) {
                    var tr = demoListView2.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'); //显示重传
                }
            });

### 具体更多操作请见layui的官网 ###

### 点赞或者评论是我最大的动力,有问题欢迎留言或者联系q:1559810637   ###

发表评论取消回复

表情：

评论列表（有 0 条评论，402人围观）

还没有评论，来说两句吧...

相关阅读

相关使用LayUI中Upload模块上传图片示例（包含前后端代码）

lauyi 文件上传的详细用法：[layui.upload][] 一。前台代码块：  <div clas

拼搏现实的明天。/ 2023年02月20日 03:13/ 0 赞/ 15 阅读

相关 php上传图片并显示代码,php完整图片上传代码

我们的目标效果：网站后台图片上传，点击上传选择图片，上传成功之后自动把图片名称放在input文本框内！！先说使用方法吧：(代码在下方自行复制，共三个demo页) 首先，最

末蓝、/ 2022年11月18日 01:25/ 0 赞/ 229 阅读

相关 layui结合springboot上传图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

心已赠人/ 2022年11月13日 13:25/ 0 赞/ 131 阅读

相关 js上传图片限制图片尺寸方法

上传图片限制图片尺寸 async beforeUploadPicture(file) { // 直播大图 const width = 347

怼烎@/ 2022年11月11日 05:25/ 0 赞/ 142 阅读

相关 $.ajax动态上传图片,基于ajax实现上传图片代码示例解析

js源码： /// /// /\! \ jQuery upload \ 用于上传单个文件，上传成功后,返回文件路径。 \ 本插件依赖jQuery，jquery.fo

素颜马尾好姑娘i/ 2022年09月03日 06:22/ 0 赞/ 148 阅读

相关 springmvc上传图片并显示--支持多图片上传

实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。开始需要在pom.xml加入几个jar,分别是： <dependency>

电玩女神/ 2022年08月20日 04:13/ 0 赞/ 267 阅读

相关多图片上传

1.div部分 <div> <span>添加图片：</span> <span id="attrFieldUploade

约定不等于承诺〃/ 2022年07月12日 02:19/ 0 赞/ 196 阅读

相关关于layui文件上传-- 多图片上传预览

<html> <head> <meta charset='UTF-8'> <meta name='Author'

忘是亡心i/ 2022年05月27日 01:17/ 0 赞/ 327 阅读

相关 layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 1. `<!DOCTYPE html>` 2.

亦凉/ 2022年05月11日 00:50/ 0 赞/ 754 阅读

相关 Layui上传多图片并限制图片分辨率示例代码

话不多说，如标题直接上代码 HTML代码 <div class="layui-form-item"> <label class=

墨蓝/ 2022年01月23日 07:35/ 0 赞/ 403 阅读