layui upload resetFile 重复上传

单文件上传注意事项

废话不多说,直接上代码

let uploadFile = upload.render( {
                                      elem: '#upload' ,
                                      url: '<%=basePath%>/exam/ExamCourseCoursewareAction.do?method=saveExamCourseCourseware' ,//此处配置你自己的上传接口即可
                                      data: {
                                        catalogId: function () {
                                          return $( "#id" ).val()
                                        } ,
                                      } ,
                                      accept: 'file',
                                      auto: false ,//不自动提交
                                      bindAction: "#bindAction" ,
                                      choose: function ( obj ) {    //此属性是在before之前调用 重点*****
                                        //将每次选择的文件追加到文件队列 重点*****
                                        this.files = obj.pushFile();
                                        obj.preview( function ( index , file , result ) {
                                          //对文件名编码 后台使用的是GBK
                                          obj.resetFile( index , file , encodeURI( file.name ) ); // 如果你用了这句话  那你一定要使用 auto属性 和 bindAction 属性 重点*****
                                          $( "#bindAction" ).click(); //将重置后的文件提交
                                        } );
                                      } ,
                                      before: function ( obj ) {
                                        //loading效果
                                        layer.msg( '上传中' , { icon: 16 , time: 0 } );
                                      } ,
                                      done: function ( res , index ) {
                                        //刷新列表
                                        query();
                                        if ( res.code === 200 ) {
                                          layer.msg( '上传成功' );
                                          // 删除数组中上传成功的文件,防止重复上传  重点*****
                                          delete this.files[index];
                                        } else {
                                          layer.msg( '上传失败' );
                                        }
                                      } ,
                                    } );

多文件的自己在研究吧

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在使用layuiupload组件进行文件上的过程中,出现了第二次上不触发上的问题。这个问题的出现可能是由于多种原因引起的。 其中较为常见的原因之一是由于前一次上文件被缓存,当您尝试重新上同一个文件时,因为在浏览器的缓存中已经存在该文件,所以上操作不会被触发。为了解决这个问题,您可以尝试在上文件时给文件名加上一个时间戳或随机数,这样就可以保证每次上的文件名称都是唯一的,避免缓存的问题。 另外一个可能原因是您在代码中没有正确地处理错误信息。在进行文件上的过程中,有可能因为网络问题或其他原因导致上操作失败,如果此时您没有正确地处理错误信息,那么下一次上时程序就会自动判断上一次上成功,而不会调用上操作。因此,您需要确保上操作是在上一次上操作完全结束后再次开始,同时还需要添加合适的错误处理代码来保证上操作的顺利进行。 最后,如果上述方法没有解决问题,您可以在控制台输出相关信息,检查程序是否在执行中出现了错误和异常。如果出现相关错误和异常,那么您需要去查找并修复它们,才能保证上操作的正常执行。 ### 回答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 第二次上不触发上事件的问题,同时也可以有效地提高上文件的效率和成功率。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值