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操作、事件监听和前后端交互的常见实践。在实际项目中，可以根据需求进行调整和优化，例如添加图片裁剪、预览等更多功能。
' +
'
' + res.name + '
' +
'
2025-05-02 21:43:05
36KB
1
最近研究了一下前端的图片裁切技术，这里分享一下使用jquery. cropper插件整合mui实现的图片裁切上传实现。
2023-03-22 10:11:53
334KB
1
.NET core 和 React 中的文件上传
2021-05-29 12:02:36
180KB
1