同一个页面上多个上传图片的按钮,可以分别上传并返回url回填

在同一页面上使用layui创建多个独立的图片上传按钮时，每个按钮都可以关联到各自的文件输入元素和上传配置。这样每个按钮点击后，都会触发对应的图片上传，并将上传成功的URL返回填充到对应的区域。

例如，假设你有两个按钮，按钮A对应上传区域A，按钮B对应上传区域B：

<button id="btn-a" lay-event="upload">上传到A区</button>
<input type="file" id="img-a" name="img-a" lay-verify="image" accept="image/*">

<button id="btn-b" lay-event="upload">上传到B区</button>
<input type="file" id="img-b" name="img-b" lay-verify="image" accept="image/*">

<div id="result-a" class="hidden">上传结果A：<span></span></div>
<div id="result-b" class="hidden">上传结果B：<span></span></div>

<script>
layui.use('upload', function () {
    // 上传按钮A
    layui.upload.render({
        elem: '#btn-a',
        url: 'api/upload-image-a', // A区上传地址
        success: function (res, data) {
            $('#result-a span').text(res.url); // 更新结果显示URL
        },
    });

    // 上传按钮B
    layui.upload.render({
        elem: '#btn-b',
        url: 'api/upload-image-b', // B区上传地址
        success: function (res, data) {
            $('#result-b span').text(res.url); // 更新结果显示URL
        },
    });
});
</script>

在上述代码中，`success`回调函数会接收到服务器返回的结果，并将其URL显示在对应的`<span>`元素内。`hidden`类可以用来隐藏默认的上传提示。