layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...

首先，这是一个坑，大坑，网上一大堆写的云里雾里，不知所以，转了一圈，除了copy就是copy，Jesus God，花了一晚上，走通了这个坑，话不多说，直接解决

layui版本： layui-v2.5.6

jquery版本：jQuery v3.2.1

问题：

上传多个商品的时候，后续的表单需要动态生成，其中包括上传文件按钮，获取文件。可是动态上传后，改上传按钮没有作用。我不是专业的前端，没有深入分析，直接说明解决方法，至于原理啥的，如果帮助了你，麻烦告知。

点击增加的时候，动态生成表单

具体做法，首先，动态生成的id需要动态拼接，保持唯一性，在拼接完成后，重新将upliad.render(...)的所有逻辑调用一遍。期间元素选择用id，这个很重要！！！！

封装成方法：

function uploadImgRender(e,showImg,uploadimd){

var uploadImg = upload.render({

elem: e

, url: '' //改成您自己的上传接口

, before: function (obj) {

//预读本地文件示例，不支持ie8

obj.preview(function (index, file, result) {

console.log(uploadImg);

$(showImg).attr('src', result); //图片链接(base64)

});

}

, done: function (res) {

//如果上传失败

if (res.error > 0) {

return layer.msg('上传失败');

}

//上传成功

if (res.error == 0) {

console.log(uploadImg)

$(uploadimd).html(res.url);

return layer.msg('上传成功');

}

, error: function () {

//演示失败状态，并实现重传

var demoText = $('#demoText');

demoText.html('上传失败重试');

demoText.find('.demo-reload').on('click', function () {

uploadImg.upload();

});

}

});

动态生成后点击：

HTML增加按钮：增加

js：var count = 1;var addM ={

addMM:function() {

count+= 1;var newInput ="

\n" +

" \n" +

" 商品图片\n" +

\n" +

" 上传图片\n" +

\n" +

" *单图上传，尺寸建议750x750\n" +

\n" +

" \n" +

\n" +

" \n"

\n" +

\n";

$('#multipleSpecifications').append(newInput);//这个很重要。虽然冗余了，但是木有办法

uploadImgRender("#imgUpload_"+count,"#imgUpload_"+count+"_","#imgUpload_goods_"+count);

}

};//动态加载元素用

$('#addSpecification').on('click', function() {var othis = $(this), type = othis.data('type');

addM[type]? addM[type].call(this, othis) : '';

});

layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...相关推荐

.net fileupload批量上传可删除_【JavaWeb基础】文件上传和下载(修订版)
前言只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 什么是文件上传? 文件上传就是把用户的信息保存起来. ...
c++读取json文件_[SpringMVC]-SpringMVC架构-07-SpringMVC文件上传
SpringMVC学习 SpringMVC文件上传文件上传相关操作步骤: a.在pom.xml中添加文件上传相关jar包 b.配置文件解析器(在核心配置文件springmvc.xml.相关jsp文 ...
php 多文件上传控件,php 动态多文件上传
php 动态多文件上传更新时间:2009年01月18日 06:01:56 作者: php 动态多文件上传实例代码,前台是javascript后台用的是php 文件上传代码 view plainc ...
PHP动态多文件上传的具体代码
PHP动态多文件上传分为两步,第一步为文件上传的代码,第二步则是文件提交的代码.希望我们通过这次的学习能加深大家所掌握的知识. AD: 大家在通过对PHP语言的学习,应该大致都可以掌握文件上传的方法. ...
ideaspringboot项目上传服务器_PHP中使用 TUS 协议来实现可恢复文件上传
曾经尝试过用PHP上传大文件吗?想知道您是否可以从上次中断的地方继续上传,而不会在遇到任何中断的情况下再次重新上传整个数据?如果您觉得这个场景很熟悉,请接着往下阅读. 文件上传是我们几乎所有现代Web ...
elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）
1.介绍本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都 ...
html对定位图片的某一部分_某系统存任意文件上传
文章来源:EDI安全 01 漏洞标题某系统存任意文件上传 02 漏洞类型文件上传 03 漏洞等级中危 04 漏洞地址 http://xxx.xx.xx.xx:9090/Common/xxxxx/ ...
上传pdf文件转图片翻页小工具，遇到JSP form中type=file的文件上传及后台Part处理问题(后台取值为null)
最近公司要求做一个上传pdf文件后将文件转换为翻页图片的小工具,我是这么做的 1.先找图片翻页的demo,微软有现有的产品turn.js感兴趣的可以自己看一下 ,有双页的有单页的,因为我司要求手机端使 ...
JS - 文件上传组件WebUploader使用详解1（带进度的文件上传
一.基本介绍 1,什么是 WebUploader? WebUploader 是由百度公司团队开发的一个以 HTML5 为主,FLASH 为辅的现代文件上传组件. 官网地址:http://fex.bai ...

layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...

layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...相关推荐

最新文章

热门文章