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
PHP+jQuery+Ajax多图上传(最大10M)加预览 本地服务器版本
2022-11-02 17:46:40
177KB
1
版本说明4.1.11中文版
1. 支持上传mp4, video标签
2. 多图上传由flash 改为h5
3. java 上传到腾讯云存储代码
2022-07-06 15:27:37
564KB
1
本项目实现 thinkphp3.2+jquery+ajax+mysql整合多张图片上传，以及配合数据库实现增删改查，可供有需要的同学学习以及使用，thinkphp多文件上传在线演示DEMO，带后台图片管理系统
2022-05-06 00:22:05
5.81MB
1
MultiImageSelector是一个模仿微信的Android图片选择器类库，有选择单张图片和多张图片模式。还可以设置选择图片的最大数量。
适用eclipse版
2022-04-29 21:49:10
2.28MB
1
（含php上传后台）需要一个多图上传并预览，可删除的功能，找了很多资料，试了ssi-uploader.js，都不成功，自己写了一个最简单的，不需要任何组件，直接以正常form表单提交就可以
2022-03-14 15:05:41
2KB
1
此款为图片上传插件、利用php+html实现的一个功能。同时还带有图片删除（直接删除本地资源文件）。我写了好几种方案可以去实现
2021-10-24 13:41:27
7KB
1