layui 多图片上传 删除

### 实现Layui框架中的多图片上传并支持删除功能 为了实现在 Layui 框架中进行多图片上传以及提供相应的删除功能，可以采用如下方法： #### HTML部分 定义文件输入框用于选择多个文件，并准备一个容器来展示已选的图片预览。 ```html <div class="layui-upload"> <button type="button" class="layui-btn">选择多图</button> <div class="layui-upload-list"> <img id="demo1" src="" alt=""> <p>预览区</p> </div> </div> <!-- 展示所选图片 --> <ul id="LAY_demo_upload"></ul> ``` #### JavaScript 部分 (基于Layui) 通过调用 `upload.render()` 方法配置上传组件的行为参数，包括设置允许的最大数量、监听事件处理程序等。对于每张成功加载后的图像，在页面上创建对应的缩略图链接；同时为这些新加入DOM节点绑定点击移除自身的逻辑[^4]。 ```javascript layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; // 多图片上传实例 var uploadInst = upload.render({ elem: '#testList' // 绑定元素 ,url: '/api/upload/' // 接口地址 ,accept: 'images' ,multiple: true ,before: function(obj){ // 预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#LAY_demo_upload').append('<li><img src="'+ result +'" title="'+ file.name +'"><span class="close">×</span></li>') }); } ,done: function(res){ console.log(res); } ,error: function(){ // 请求异常回调 } }); $(document).on('click','.close',(function(e){ e.preventDefault(); $(this).parent().remove(); })); }); ``` 上述代码片段展示了如何利用Layui库构建一个多文件上传界面，并实现了基本的前端交互效果——即用户可以选择若干张照片并通过AJAX方式提交给服务器端保存；与此同时，还提供了简单的可视化反馈机制让用户能够即时看到自己挑选出来的素材列表，并且可以通过关闭按钮轻松撤销某项选择操作[^4]。