layui的upload不生效问题

最新推荐文章于 2023-09-26 12:36:17 发布
最新推荐文章于 2023-09-26 12:36:17 发布
阅读量3.7k 收藏 1
点赞数 2
文章标签： jquery LayUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45499763/article/details/107338767
版权

在工作中碰到上传问题，就看了layui的upload，感觉很简单，

上传的主要参数就像官网所说这些，但我使用后，怎么都不生效，没有请求，后端也没进断点，后面查阅很多，发现是upload渲染问题，不应该在toobar里面渲染，而是应该放在table .done中渲染

当归啊
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
layui一个页面使用多个文件upload上传按钮
09-02
layui一个页面使用多个文件upload上传按钮
layui 上传文件upload不上传再次点击按钮时不执行choose小技巧.doc
06-04
在layui框架中，上传文件是非常常见的需求，但是在上传文件的过程中，我们可能会遇到一些问题，例如上传按钮点击后不执行choose事件，这篇文章将会讲解如何解决这个问题，并提供一个简单的上传文件的解决方案。...
关于layui upload上传组件上传文件无反应的问题
最新发布
jerrylearner的博客
09-26 2615
这个文件上传组件上面的，其他文章里面提到的二次上传同样的文件无反应也是跟这里有关，因为这个input给value属性赋值为已选择的文件的路径，当第二次上传同样的文件因为路径相同，就不会处理。其实layui文档里也写了，调用layui.upload.render时，会返回一个实例，我们保存这个实例，下次不要重复去调layui.upload.render就可以了，要调整参数通过实例去调reload方法。照例先百度一番，出来的文章都是说第二次上传同样的文件无反应的问题，这个有相应的解决方法。
layui中的坑：layui.upload无效
热门推荐
刘学文的博客
07-23 1万+
今天在使用layui中自带的文件上传组件layui.upload的时候，遇到了一个问题，就是当我在关闭弹出层之后，父页面中的layui.upload事件就无法监听，网上找了好久，最后发现了layui中关于upload中的一个问题：当layui.upload被重复渲染之后，就会无效。基于这个原理，如果layui.upload事件在选择图片之后没有进行回调，没有触发事件，可以去看一下是不是将lay...
layui文件上传按钮不起作用(动态添加的元素)
Alive_tree的博客
09-11 1万+
背景： 一个下拉框选择不同的下拉框展示不同的页面 不同的页面都有文件上传按钮 选择展示不同的页面，页面的文件上传按钮不起作用 查资料： 动态添加的元素没有办法渲染layui.upload.render(); 分析： 1、页面在选择前，JS里的layui.upload.render()已经执行了 2、layui.upload.render()执行但是并找不到#file_choose元素，因为页面还...
layui upload 点击上传没有反应 JS动态加载
软件工程小施同学 的专栏
09-16 4998
下图中“上传图片”是js动态加载的，点击“上传图片”没有反应，是因为layui的触发函数是先于动态加载的html代码的，所以就会绑定失败。 解决方案： js代码： // 某段js代码，嵌入html代码 certificates_html += '<button type="button" class="layui-btn upload_img" id="original_document_' + accounting_entry['id'] + '">'; certificat...
JavaWeb——LayUi 上传,layui 在js添加html元素后点击upload不可用问题
weixin_45803109的博客
12-14 3655
项目背景： layui弹窗中做新增，新增带有上传文件需求。 由于此html是由js编写后存放在弹窗中，导致点击上传无法生效。 解决： 把upload方法存入弹窗成功回调方法中，即可上传文件。 //开启弹窗 function openDailog(){ //弹出模态框 addRuleDailog=layer.open({ type: 1, title:false, move:false, closeBtn:0, ...
layui.table.reload后upload按钮失效
huarshao的博客
11-18 2042
layui开发中碰到问题，导入按钮放在table的头部工具栏中，在点击查询按钮刷新table后，发现导入按钮失效了。重新刷新页面，先点击导入时可以用的。 解决方案： 1，table.render中添加done方法，里面添加bindTableToolbarFunction() table.render({ elem: '#currentTableId' , url: your_url , where: your_where , toolb
layui上传HTML,layui 在js添加html元素后 upload不可用问题
weixin_36251341的博客
06-08 353
项目要写一个 点击添加按钮,添加一个上传图片和图片介绍的功能本来以为简简单单,没想到遇到了这么一个坑,js添加html后 upload不能用解决办法:但是这并不是我想要的最终结果,因为只能上传一次,细看代码后发现 var id = xxx;在function内部下面是我修改后的代码$(function(){var id = 1; //这个id写在function外面$('.addcontainer...
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
10-16
在开发Web应用时，经常会遇到跨域问题，尤其是在前端框架如LayUI与后端API交互时。跨域是浏览器为了安全而实施的一种策略，它限制了JavaScript从一个源（域、协议或端口）向另一个源发送HTTP请求的能力。在LayUI图片...
layui(1.0.9)文件上传upload,前后端的实例代码
10-16
今天小编就为大家分享一篇layui(1.0.9)文件上传upload,前后端的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
10-18
在使用layui前端框架进行文件上传时，可能会遇到一个常见的问题：虽然文件实际上已经成功上传到服务器，但layui却显示上传异常。这个问题通常与后端服务器返回的数据格式有关。本文将详细分析这个问题的原因，并提供...
Layui图片上、视频、音频、文件上传接口及跨域上传
06-20
Layui图片上传主要依赖其`upload`模块，该模块提供了一种直观、友好的用户界面，并且支持预览、多图上传等功能。在实际应用中，开发者可以通过设置不同的参数来自定义上传行为，例如设置上传的URL、数据字段名、文件...
layui 解决form表单点击无反应的问题
10-16
今天小编就为大家分享一篇layui 解决form表单点击无反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui文件上传控件带更改后数据传值的方法
10-16
layui的文件上传控件是基于`layui-upload`模块的，因此我们需要在layui的初始化代码中加载这个模块。例如： ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"> ...
Layui上传图片，上传无效，解决方法
陳风弥的博客
05-18 3913
今天运维项目，需要增加上传图片，碰到了两个坑，亲测有效。 首弹： 1.需要动态生成html，刚开始只是在 <script type="text/javascript"> layui.upload.render({ elem: '#xx', url: 'xxx', done: function (r) { $('#xx').val(r.msg); $('#showImg').attr("src
关于layui动态上传图片upload的使用方法
qq_23875211的博客
09-04 7167
layui 中upload插件使用方法 实现内容：点击添加广告能够动态在后面添加一行，例如图1所示，并且还能够动态删除选定行 图1 下面我们来具体讲下是如何实现该功能的 先贴上代码，layui的css与jq引用就不贴了，hahahahaha… html代码片段： <fieldset class="layui-elem-field"> <label class="...
layui动态渲染图片上传
Twoknives的博客
06-17 1414
之前没用过layui，这次跟着遇到这个问题，记录一下。 原理的话是动态加载完之后，直接渲染， <div id="add1">+添加</div> <div class="my_info_imglist"> <button type="button" class="layui-btn btn_img" id="0">上传</button> <input type="hidden" id="img_id0" lay-verify="requi
upload.render is not a function
醉殇姒若梦遗年 ツ的博客
12-01 8082
upload.render is not a function最近使用layui框架做一个上传文件的功能，发现控制台报错:upload.render is not a function仔细检查引入的layui.css和layui.js文件发现没有什么问题，又去重新阅读了一下官方文档用法没有找到错误，后来突然发现问题出在layui的版本上，layui的2.0之前的版本和2.0之后的版本相比有较大改动，
layui upload 第二次上传 不触发上传
06-28
### 回答1： 在使用layui的upload组件进行文件上传的过程中，出现了第二次上传不触发上传的问题。这个问题的出现可能是由于多种原因引起的。 其中较为常见的原因之一是由于前一次上传文件被缓存，当您尝试重新上传同一个文件时，因为在浏览器的缓存中已经存在该文件，所以上传操作不会被触发。为了解决这个问题，您可以尝试在上传文件时给文件名加上一个时间戳或随机数，这样就可以保证每次上传的文件名称都是唯一的，避免缓存的问题。 另外一个可能原因是您在代码中没有正确地处理错误信息。在进行文件上传的过程中，有可能因为网络问题或其他原因导致上传操作失败，如果此时您没有正确地处理错误信息，那么下一次上传时程序就会自动判断上一次上传成功，而不会调用上传操作。因此，您需要确保上传操作是在上一次上传操作完全结束后再次开始，同时还需要添加合适的错误处理代码来保证上传操作的顺利进行。 最后，如果上述方法没有解决问题，您可以在控制台输出相关信息，检查程序是否在执行中出现了错误和异常。如果出现相关错误和异常，那么您需要去查找并修复它们，才能保证上传操作的正常执行。 ### 回答2： Layui Upload 是一款基于 layui 使用的文件上传组件，可以方便地实现文件的上传和显示，使用灵活简便。在使用layui upload 进行第二次上传时，有时候可能会出现不触发上传的情况。这种情况通常是由于以下几个原因： 一、 文件已上传成功但未返回成功状态码 这种情况通常是由于上传文件过大或者请求超时等因素导致上传文件的返回状态码出现异常，从而导致组件未能获取到上传成功的状态。此时可以在开发者控制台中进行调试，查看返回状态码是否异常。如果确认异常，可以在服务端进行相应的优化，解决上传文件返回状态码的问题。 二、组件被错误配置 在使用 layui Upload 组件时，很容易出现组件配置错误的情况。例如，未正确配置上传地址、文件成功上传后未配置返回消息等问题，都可能导致组件出现不触发上传的情况。针对这种情况，可以仔细查看组件的配置，排除组件配置错误的可能性。 三、文件类型或大小未通过校验 Layui Upload 组件可以对文件进行类型和大小的校验，如果文件不符合规范，组件将会在上传前就拒绝上传文件，从而导致不触发上传的问题。在这种情况下，可以检查文件类型和大小是否符合要求，从而解决问题。 总之，Layui Upload 组件不触发上传的问题可能是由多种因素导致的，需要开发者进行细致的排查和解决。在使用该组件时需要注意细节和规范，避免出现相关问题。 ### 回答3： 先分析下LayUI Upload 第二次上传不触发上传事件的原因，可能存在以下几种情况： 1、上传模式为：多文件上传模式，选择文件时没有弹出文件选择框。这种情况可能是由于JS或CSS文件没有正确引入，或是因为JS脚本中代码出现了错误。 2、第一次上传没有结束就重复上传。原因可能是在上传文件时，在文件上传成功之前，或上传失败之前就尝试进行另一次上传操作，导致第二次上传操作无法触发。 3、没有进行正确的更新和绑定操作。由于layui.upload是一个基于HTML5的上传组件，我们需要在上传成功或失败之后更新form数据，以便在下次上传时读取正确的数据。如果没有进行正确的更新和绑定操作，则可能导致第二次上传不触发上传事件。 以上情况可能都会导致LayUI upload 第二次上传不触发上传事件，需要针对具体的问题进行排查和解决。 针对以上情况，我们可以采取以下方案进行解决： 1、确保JS或CSS文件正确引入，并在JS脚本中进行正确的初始化操作。 2、上传前需要确保上一次上传已经完全结束，可以通过设置多文件上传模式、开启自动上传等方式，让文件上传过程完全结束，再进行下一次上传操作。 3、上传成功或失败之后需要进行正确的更新与绑定操作，以确保上传数据的正确性和连贯性。 以上方案可以轻松解决LayUI upload 第二次上传不触发上传事件的问题，同时也可以有效地提高上传文件的效率和成功率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值