Layui上传图片，上传无效，解决方法

今天运维项目，需要增加上传图片，碰到了两个坑，亲测有效。

首弹：

1.需要动态生成html，刚开始只是在

<script type="text/javascript"> 
layui.upload.render({
        elem: '#xx',
        url: 'xxx',
        done: function (r) {
            $('#xx').val(r.msg);
            $('#showImg').attr("src", '${xxx}' + r.msg);
            $('#showImg').show();
        }
    });
</script>

结果是没有响应，可以弹出照片选择窗口但是无法根据url 响应后台，后百度CSDN,找到类似解决方法

原链接（https://blog.csdn.net/muyeju/article/details/106113603?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242）

解决方法：

1.首先为button绑定一个动态的id

     html += '<label class="glui-form-label">学历证书</label>';
        html += '<div class="glui-input-inline">';
        html += '<div style="width:400px;height:144px;">';
        html += '<img id="showImgXlzs' + code + '" height="144" width="244" src=""><br>';
        html += '</div>';
        html += '<input type="hidden" name="xlzstp_' + code + '" id="xlzstp_' + code + '" value="">';
        html += '<button type="button" class="glui-btn" id="testtp' + code + '" >';
        html += '<i class="glui-icon">&#xe67c;</i>点击上传图片';
        html += '</button>';
        html += '</div>';

2.在append后，在调用一下上传方法

code值是如下生成解决方法是在append 追加html后，动态生成还是调用不知带怎么形容好，ssss('#按钮Id' + 1, '访问路径url', '#inputId' + 1, 1); 这个方法里面调用

<script type="text/javascript"> 
function xxx() {
        var x= $('#xx').val();
        var last = '';
        var newValue = '';
        if (x== null || x== '') {
            $("#xx").append(xxjlHtml(1));
            newValue = '1';
            last = '1';
            ssss('#按钮Id' + 1, '访问路径url', '#inputId' + 1, 1);
        } else {//存在记录的时候，获取最大的一个记录，然后+1
            var nr = xxjlCode.split(',');//存在记录时，转换为数组
            var max = Math.max.apply(null, nr);//获取最大的一个值
            newValue = max + 1;
            $("#xx").append(xxjlHtml(newValue));
            nr.push(newValue);
            last = nr.join(',');
            ssss('#按钮Id' + newValue, '访问路径url', '#inputId' + newValue, newValue);
        }

        $('#xx').val(last);
       
    }



 function ssss(id, url, xltpId, num) {
        // debugger;
        // console.log(id)
        glui.upload.render({
            elem: id,
            url: url,
            done: function (r) {
                $(xltpId).val(r.msg);
                $('#imgID' + num).attr("src", '${xxxxx}' + r.msg);
                $('#imgID' + num).show();
                layer.msg('上传成功');
            }
        });
    }

</script> 

展示一下前人的追加html，看的我这个刚入行的菜鸟6666 是挺长

第二个问题 也是相同的上传问题，因为之前并没有实现上传图片，旧数据的修改可以上传图片，一开始感觉和刚才一样 调用ssss('#按钮Id' + 1, '访问路径url', '#inputId' + 1, 1); 这个方法  但是毫无用处

看页面数据

我是这么操作的,因为之前是调用的方法sss（）,

  <button type="button" class="glui-btn" id="id${num}" 
        onclick="sss(id, url, xltpId, num)"  >
       <i class="glui-icon">&#xe67c;</i>上传图片
  </button>

但是上传中，并不能加 onclick 事件，也不是不能加，上传图片不行，和上个一样，可以走到方法里，但是不执行上传

可以打开弹出层

function s(){
 layer.open({
            type: 2,
            area: ['300px', '400px;'],
            title: '请选择机构',
            content: 'url'
        });
}

然后没错  也需要动态加载，写在<c:forEach></c:forEach>里面

一开始我是这么写

	<c:forEach items="${list }" var="l">
                            <label class="layui-form-label">学历证书</label>
                            <div class="layui-input-inline">
                                <div style="width:400px;height:144px;">
                                    <img id="img${l.num}" height="144" width="244"
                                         src="${xxxx}${l.xxx}"><br>
                                </div>

                                <input type="hidden" name="xlzstp_${l.num}" id="input${l.num}" value="${x.xlzstp }">
                                <button type="button" class="layui-btn" id="button${l.num}" >
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                         
                                <script type="text/javascript">
                                    layui.upload.render({
                                        elem: '#button${l.num}',
                                        url :'url',
                                        done : function(r){
                                            $('#input${l.num}').val(r.msg);
                                            $('#img${l.num}').attr("src",'${xxxx}' + r.msg);
                                            $('#img${l.num}').show();
                                            layer.msg('上传成功');
                                        }
                                    });
                                </script>
                            </div>      
                    </c:forEach>

然而并不行，请教一个同事，试验了一下，html从上至下依次加载，我忘了js

于是乎解决了

 <script src="plug-in/layui/layui_v2.2/layui.all.js" charset="utf-8" type="text/javascript"></script>
                                <script src="plug-in/tools/layuitools.js" charset="utf-8"></script>
                                <script type="text/javascript">
                                     <script type="text/javascript">
                                    layui.upload.render({
                                        elem: '#button${l.num}',
                                        url :'url',
                                        done : function(r){
                                            $('#input${l.num}').val(r.msg);
                                            $('#img${l.num}').attr("src",'${xxxx}' + r.msg);
                                            $('#img${l.num}').show();
                                            layer.msg('上传成功');
                                        }
                                    });
                                </script>
                                </script>

这就是两个上传坑，其实是一个，写到第一个反应过来了，但是不想删，就这样吧‘希望大佬赐教