layui多图上传实现删除功能的例子

layui是一款优秀的前端框架，提供了丰富的组件，包括多图上传功能。在本文中，我们将深入探讨如何在layui中实现多图上传并添加删除功能。我们需要了解layui的上传组件基本用法，然后结合JavaScript和CSS来实现图片预览和删除操作。 1. layui上传组件基础： layui的上传组件（layui.upload）是一个基于HTML5 File API的模块，支持单图和多图上传。它提供了简单的API接口，如elem、url、multiple等参数，用于配置上传按钮的选择器、上传的URL以及是否开启多选模式。 2. HTML结构： 在HTML中，我们需要定义一个layui的上传区域，包含一个layui-btn作为触发上传的按钮，以及一个layui-upload-list用于展示上传的图片。例如： ```html ``` 3. CSS样式： 为了美化上传后的图片显示和添加删除按钮，我们需要定义一些CSS样式。例如： ```css .uploader-list { margin-left: -15px; } .uploader-list .info { /* ... */ } .uploader-list .handle { /* ... */ } .uploader-list .file-iteme { /* ... */ } ``` 4. JavaScript实现： 在layui的upload.render()方法中，我们配置了上传的参数，并在done回调中处理上传成功后的逻辑。在这个例子中，当图片上传成功后，会在uploader-list中动态插入一个新的图片元素，包含图片预览和删除按钮。同时，通过jQuery监听文件项的鼠标悬停事件，控制预览信息和删除按钮的显示与隐藏： ```javascript layui.use(['upload', 'layer'], function () { var upload = layui.upload; var layer = layui.layer; upload.render({ elem: '#test2', url: '', // 上传接口 multiple: true, before: function (obj) { layer.msg('图片上传中...', { icon: 16, shade: 0.01, time: 0 }); }, done: function (res) { layer.close(layer.msg()); $('#uploader-list').append( '' ); } }); $(document).on("mouseenter mouseleave", ".file-iteme", function (event) { if (event.type === "mouseenter") { $(this).children(".info").fadeIn("fast"); $(this).children(".handle").fadeIn("fast"); } else if (event.type === "mouseleave") { $(this).children(".info").fadeOut("fast"); $(this).children(".handle").fadeOut("fast"); } }); // 添加删除事件 $(document).on("click", ".handle .glyphicon-trash", function () { // 在这里编写删除图片的逻辑，例如调用后台接口删除图片 // ... $(this).parent().parent().remove(); }); }); ``` 5. 删除功能： 在CSS中，我们为每个上传的图片添加了一个删除按钮。通过监听删除按钮的点击事件，可以实现图片的前端移除。在实际应用中，可能还需要向服务器发送请求，真正删除存储的图片。 通过以上步骤，我们就实现了layui的多图上传并添加了删除功能。这个例子不仅展示了layui上传组件的基本用法，还涉及到了DOM操作、事件监听和前后端交互的常见实践。在实际项目中，可以根据需求进行调整和优化，例如添加图片裁剪、预览等更多功能。