layui文件上传回调前对文件类型及大小判断

layui.use(['upload', 'form'], function () {
            var upload = layui.upload;
            var form = layui.form;
            upload.render({
                elem: '#uploadCover'
                , url: '/file/upload.shtml'
                , method: "post"
                , auto: false  //auto 参数必须设置为false
                ,size:"2048"
                ,accept:"file"
                ,exts: 'jpg|png|jpeg'
                ,choose: function(obj){  //上传前选择回调方法
                    var flag = true;
                    obj.preview(function(index, file, result){
                        console.log(file);            //file表示文件信息,result表示文件src地址
                        var img = new Image();
                        img.src = result; 
                        img.onload = function () { //初始化夹在完成后获取上传图片宽高,判断限制上传图片的大小。
                            if(img.width ==343 && img.height ==240){
                                obj.upload(index, file); //满足条件调用上传方法
                            }else{
                                flag = false;
                                D.msg("您上传的小图大小必须是343*240尺寸!");
                                return false;
                            }
                        }
                        return flag;
                    });
                }
                , done: function (res) {//上传成功回调方法
                    $("#xcCoverUrl").val(res.data);
                    $("#xcCoverUrlShow").attr("src", res.fastdfsHost + res.data);
                    layer.closeAll('loading');
                }
            });
        });

 

### Layui图片上传功能实现 Layui 是一款基于 JavaScript 的端 UI 框架,提供了丰富的模块化组件,其中 `upload` 模块用于处理文件上传功能。以下是关于如何在 Layui 中实现图片上传功能的详细介绍。 #### 1. 基本配置与初始化 通过引入 Layui 的核心文件并加载 `upload` 模块来完成基本配置。以下是一个简单的 HTML 和 JavaScript 结构: ```html <!-- 引入 Layui CSS --> <link rel="stylesheet" href="/path/to/layui/css/layui.css"> <button type="button" class="layui-btn" id="testUpload">上传图片</button> <div id="preview"></div> <script src="/path/to/layui/layui.js"></script> <script> layui.use(['upload'], function() { var upload = layui.upload; // 执行实例 var uploadInst = upload.render({ elem: '#testUpload', // 绑定元素 url: '/api/upload', // 接收上传文件的服务端接口地址 accept: 'images', // 只允许上传图片 multiple: true, // 支持多图上传 before: function(obj) { // 文件上传触发 layer.load(); // 显示加载动画 }, done: function(res) { // 文件上传完毕后的回调函数 layer.closeAll('loading'); // 关闭加载动画 if (res.status === 0) { // 判断返回状态码是否成功 console.log(res); // 动态生成预览图片 var imgElem = document.createElement('img'); imgElem.src = res.data.url; imgElem.style.width = '100px'; imgElem.style.height = 'auto'; document.getElementById('preview').appendChild(imgElem); } else { layer.msg('上传失败!'); } }, error: function() { // 请求异常时触发 layer.msg('请求异常,请稍后再试!'); } }); }); </script> ``` 上述代码实现了基础的图片上传功能,并动态展示了上传成功的图片[^1]。 --- #### 2. 自定义参数传递 如果需要向服务端额外传递一些自定义数据(如用户 ID 或其他字段),可以通过设置 `data` 参数实现: ```javascript var uploadInst = upload.render({ ... data: { userId: 123 }, // 向服务端发送附加参数 ... }); ``` 此方法会在上传过程中将指定的数据一并提交给服务端[^2]。 --- #### 3. 进度条监控 为了提升用户体验,可以在上传过程中显示进度条。这需要借助 Layui 提供的事件钩子 `progress` 来捕获上传进度变化: ```javascript var uploadInst = upload.render({ ... progress: function(n, elem) { // n 表示当进度百分比 element.progress('demo', n + '%'); // 更新进度条 if (n === 100) { layer.msg('上传已完成!'); } }, ... }); ``` 在此基础上,还需要配合 Layui 的 `element` 模块创建一个可视化的进度条容器[^3]。 --- #### 4. 文件验证与限制 为了避免非法文件被上传至服务器,可通过客户端进行初步校验。例如,限定文件类型大小以及最大上传数量等: ```javascript var uploadInst = upload.render({ ... size: 1024 * 5, // 单位 KB,默认不超过 5MB exts: 'jpg|png|gif|bmp', // 允许上传的扩展名 number: 9, // 最大上传数量为 9 张 auto: false, // 不自动上传 bindAction: '#confirmBtn', // 点击确认按钮才真正上传 choose: function(obj) { // 当选择文件后触发 obj.preview(function(index, file, result) { console.log(file.name); // 输出文件名 }); }, ... }); ``` 以上代码片段设置了多种约束条件,确保只有符合条件的文件才能进入后续流程。 --- #### 5. 删除已选中的文件 对于已经选定但尚未正式提交的文件,可以提供删除操作的功能。具体逻辑如下所示: ```javascript choose: function(obj) { var files = this.files = obj.pushFile(); // 遍历得到的文件列表项 $.each(files, function(key, value){ var tr = $(['<tr id="' + key +'">', '<td>' + value.name + '</td>', '<td><button class="layui-btn layui-btn-xs del-file">删除</button></td>' ].join('')); $('table tbody').append(tr); // 添加删除事件监听器 $('.del-file').on('click', function(){ delete files[key]; $('#' + key).remove(); }); }); } ``` 这段脚本能够帮助用户管理待上传的资源集合。 --- #### 总结 综上所述,利用 Layui 的强大工具集完全可以构建一套完整的图片上传解决方案,既满足业务需求又兼顾良好的交互体验。除了本文提到的内容外,还可以进一步探索更多高级特性以适应复杂场景下的挑战。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值