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(
'
' +
'
' +
'

' +
'
' + res.name + '
' +
'
'
);
}
});
$(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操作、事件监听和前后端交互的常见实践。在实际项目中,可以根据需求进行调整和优化,例如添加图片裁剪、预览等更多功能。
1