关于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('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadImg.upload();
                });
            }
        });

 动态生成后点击:

HTML增加按钮:
 <button class="layui-btn" type="button" id="addSpecification" data-type="addMM">增加</button>

js:

      var count = 1;
        var addM = {
            addMM: function () {
                count += 1;
                var newInput ="<hr/><div class=\"layui-form-item\">\n" +
                        "                            <label for=\"phone\" class=\"layui-form-label\">\n" +
                        "                                <span class=\"x-red\"></span>商品图片</label>\n" +
                        "                            <div class=\"layui-upload\">\n" +
                        "                                <button type=\"button\" class=\"layui-btn imgUpload_\" data-type=\"imgUpload_R\" id=\"imgUpload_"+count+"\">上传图片</button>\n" +
                        "                                <div class=\"layui-word-aux\">\n" +
                        "                                    <span class=\"x-red\">*</span>单图上传,尺寸建议750x750\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                        <div class=\"layui-form-item\">\n" +
                        "                            <label for=\"phone\" class=\"layui-form-label\">\n" +
                        "                                <span class=\"x-red\"></span></label>\n" +
                        "                            <div class=\"layui-upload-list\">\n" +
                        "                                <img class=\"layui-upload-img\" id=\"imgUpload_"+count+"_\">\n" 
                                   <p id=\"imgUpload_goods_"+count+"\"></p>\n" +
"                                        </div>\n" +
"                                      </div>\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) : '';
        });
    

  

猜你喜欢

转载自www.cnblogs.com/guyanzy/p/12485371.html