当前位置: 首页 > article >正文

layui 文件上传前检查文件大小,后面再点上传出现重复提交的问题

重复提交问题是由于用户多次点击上传按钮或者网络延迟造成的,可以通过以下方法解决:

  1. 前端解决方案:

    • 在用户点击上传按钮后禁用按钮,避免用户多次点击。
    • 在文件上传开始前,检查文件是否已经在上传中,如果是,则不进行重复上传。
    • 在上传完成或者上传失败后,启用上传按钮,允许用户再次上传。
  2. 后端解决方案:

    • 在上传文件时,记录已经上传的文件的信息,如文件名、大小等,将其存储在数据库或者缓存中。
    • 在每次上传文件之前,先检查文件的信息是否已经存在,如果存在,则认为是重复提交,不进行上传操作。
    • 在上传完成或者上传失败后,删除已上传文件的信息。

这样可以避免用户重复提交文件,并保证文件上传的唯一性。

upload.render({
elem: layero.find(“#uploadPicture”),
url: ‘{:url(“admin/annex/upload?type=modellabel&water=no&group=office”)}’,
data: {
model_id: 1
},
accept: ‘images’,
acceptMime: ‘image/png,image/jpeg’,
exts:‘jpg|png’,
method: ‘post’,
auto:false,
size: 1024*10, //上传文件大小kB
multiple: false, //允许多文件上传
number: 1, //可以同时上传的文件数量,0表示不限制
// bindAction: ‘#upimgAction1’,
choose: function (obj) {
//预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
var flag = true;
obj.preview(function (index, file, result) {
console.log(111);

                                console.log(file);            //file表示文件信息,result表示文件src地址
                                if(file.size > 1024*1024) { //当文件大小大于10MB时
                                  layer.msg("{$Think.lang.site_parametre_popup_img_max}1MB", {offset: 'auto'}); 
                                  flag = false;
                                }
                            if(flag) obj.upload(index, file)
                        });

// $(‘#upimgAction1’).click();
},
done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
layer.msg(res.msg, {time: 1500, offset: ‘auto’});
if (res.code == 1) {
layero.find(“#carouselimg”).hide().addClass(‘product_price_tag_img_full’).attr(‘src’, res.data.file).fadeIn();
layero.find(“#carouselimgv”).val(res.data.file);
}
}
});


http://www.kler.cn/a/388077.html

相关文章:

  • Android中桌面小部件的开发流程及常见问题和解决方案
  • 使用Python实现定期从API获取数据并存储到数据库的完整指南
  • 【初阶数据结构与算法】链表刷题之移除链表元素、反转链表、找中间节点、合并有序链表、链表的回文结构
  • Stable Diffusion:照片转视频插件
  • 洞察鸿蒙生态,把握开发新机遇
  • ESLint 使用教程(七):ESLint还能校验JSON文件内容?
  • 【图】图学习
  • 20241106软考架构-------软考案例12答案
  • SQL,力扣题目262,行程和用户
  • 9_api_intro_imagerecognition_ocr2word
  • Vue 的 keep-alive
  • CSRF 跨站请求伪造的实现原理和预防措施
  • Windows 使用批处理脚本快速释放被占用的端口
  • 深度学习:预训练(Pre-training详解
  • 【如何在 Linux 和 Android 系统中杀死进程】
  • 【模型学习之路】手写+分析GAT
  • 前端 Flex 布局语法详解
  • Python接口自动化测试自学指南(项目实战)
  • 海外云手机在出海业务中的优势有哪些?
  • Elasticsearch实战使用
  • u盘怎么重装电脑系统_u盘重装电脑系统步骤和详细教程【新手宝典】
  • Hive中查看字段中是否包含某些字符串的函数
  • Git 入门篇(三)
  • 发布 VectorTraits v3.0(支持 X86架构的Avx512系列指令集,支持 Wasm架构及PackedSimd指令集等)
  • 从0开始深度学习(24)——填充和步幅
  • 通过 SSH 连接远程 Ubuntu 服务器