layui 阻止图片上传(before 方法)

今天项目上传图片需要校验大小,而且各个地方图片大小的限制不一样,如果在后台控制会比较麻烦,所以就放在 js 里校验,这里用的layui(1.0.9) 的 upload.js 模块。这个版本的layui本来是不支持阻止图片上传的,所以改动了源码。

//改动前的
s.before && s.before(e),l.parent().submit();
//改动后的
if(s.before==undefined || s.before(e)==undefined || (s.before && s.before(e))) l.parent().submit();
else return false;

由于之前的上传图片是没有 写before方法的(会返回undefined),为了不改动之前的代码,就在这里加了判断。s.before 是 before 方法的内容,s.before(e) 是 before 方法的返回值,如果没有就回返回undefined

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是使用 layui 实现批量上图片的代码示例: HTML 代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="test-upload-normal">选择文件</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> <button type="button" class="layui-btn" id="test-upload-normal-submit">上</button> </div> ``` JavaScript 代码: ```javascript //执行实例 layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; //普通图片 var uploadInst = upload.render({ elem: '#test-upload-normal' ,url: '/upload/' ,multiple: true //允许多文件上 ,before: function(obj){ //预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#demoList').append('<tr><td>'+ file.name +'</td><td>'+ (file.size/1024).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>') }); } ,done: function(res){ //上完毕 console.log(res); } ,error: function(){ //请求异常回调 console.log('上失败'); } }); //批量上图片 $('#test-upload-normal-submit').on('click', function(){ //获取文件列表 var file_list = $('#demoList tr'); //遍历文件列表 file_list.each(function(index, elem){ //获取文件名 var file_name = $(elem).find('td:first-child').text(); //获取文件状态 var file_status = $(elem).find('td:nth-child(3)').text(); //如果状态是等待上,则开始上 if(file_status === '等待上'){ //上文件 uploadInst.upload(index, $(elem)); } }); }); //监听删除事件 $('#demoList').on('click', '.demo-delete', function(){ $(this).parents('tr').remove(); }); }); ``` 上述代码中,我们使用了 layui 的 upload 模块实现了批量上图片的功能。用户可以通过点击“选择文件”按钮选择多个图片文件,上前会预览图片,然后点击“上”按钮,上所有等待上图片文件。在上过程中,用户可以删除某个文件,也可以重某个文件。上完成后,会在控制台输出上结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天进步一点_点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值