layui上传图片实现删除-layui上传图片demo
在Web开发中，图片上传和删除是常见的功能需求。使用Layui框架可以轻松实现这一功能。本文将介绍如何使用Layui实现图片上传并提供删除功能，并提供多种实现思路。
解决方案概述
Layui 是一个前端UI框架，提供了丰富的组件和模块，包括文件上传模块。通过Layui的upload模块，我们可以轻松实现图片上传功能。为了实现图片删除功能，我们可以在上传后的图片旁边添加一个删除按钮，点击该按钮时触发删除操作。
使用Layui实现图片上传
首先，确保你已经引入了Layui的CSS和JS文件。如果还没有引入，可以在HTML文件的头部添加以下代码：
html
</p>
<title>Layui上传图片示例</title>
<div class="layui-upload">
<button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" style="max-width: 300px">
<p id="demoText"></p>
</div>
</div>
layui.use('upload', function(){
var upload = layui.upload;
// 执行实例
var uploadInst = upload.render({
elem: '#uploadBtn' // 绑定元素
,url: '/upload' // 上传接口
,before: function(obj){
// 预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); // 图片链接（base64）
});
}
,done: function(res){
// 上传完毕回调
if(res.code == 0){
$('#demoText').html(''); // 清空提示信息
// 在这里可以添加删除按钮
$('#demo1').after('<button class="layui-btn layui-btn-danger" id="deleteBtn">删除</button>');
$('#deleteBtn').click(function() {
// 删除图片
$.ajax({
url: '/delete',
type: 'POST',
data: {filename: res.data.filename},
success: function(response) {
if (response.code == 0) {
$('#demo1').attr('src', '');
$('#demoText').html('');
$('#deleteBtn').remove();
} else {
alert('删除失败');
}
},
error: function() {
alert('请求失败');
}
});
});
} else {
$('#demoText').html(res.msg);
}
}
,error: function(){
// 请求异常回调
$('#demoText').html('上传失败');
}
});
});
<p>代码解析
HTML部分：
#uploadBtn：上传按钮。#demo1：显示上传后的图片。#demoText：显示上传状态或错误信息。
JavaScript部分：
- 使用
layui.use加载upload模块。 upload.render方法配置上传实例。before方法用于预读本地文件并显示在页面上。done方法在上传成功后执行，显示图片并添加删除按钮。- 删除按钮的点击事件触发删除操作，通过AJAX请求删除服务器上的图片。
- 使用
多种实现思路
使用模态框确认删除
为了提高用户体验，可以在删除图片前弹出一个模态框确认用户是否真的要删除图片。以下是修改后的代码：
html</p>
layui.use(['upload', 'layer'], function(){
var upload = layui.upload;
var layer = layui.layer;
// 执行实例
var uploadInst = upload.render({
elem: '#uploadBtn' // 绑定元素
,url: '/upload' // 上传接口
,before: function(obj){
// 预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); // 图片链接（base64）
});
}
,done: function(res){
if(res.code == 0){
$('#demoText').html(''); // 清空提示信息
// 在这里可以添加删除按钮
$('#demo1').after('<button class="layui-btn layui-btn-danger" id="deleteBtn">删除</button>');
$('#deleteBtn').click(function() {
layer.confirm('确定要删除这张图片吗？', function(index){
// 删除图片
$.ajax({
url: '/delete',
type: 'POST',
data: {filename: res.data.filename},
success: function(response) {
if (response.code == 0) {
$('#demo1').attr('src', '');
$('#demoText').html('');
$('#deleteBtn').remove();
layer.close(index);
} else {
layer.msg('删除失败');
}
},
error: function() {
layer.msg('请求失败');
}
});
});
});
} else {
$('#demoText').html(res.msg);
}
}
,error: function(){
// 请求异常回调
$('#demoText').html('上传失败');
}
});
});
<p>批量上传和删除
如果需要支持批量上传和删除图片，可以使用Layui的多文件上传功能，并在上传后的列表中添加删除按钮。以下是示例代码：
html
</p>
<title>Layui批量上传图片示例</title>
<div class="layui-upload">
<button type="button" class="layui-btn" id="uploadBtn">批量上传图片</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>操作</th>
</tr>
</thead>
<tbody id="fileList"></tbody>
</table>
</div>
</div>
layui.use(['upload', 'layer'], function(){
var upload = layui.upload;
var layer = layui.layer;
// 执行实例
var uploadInst = upload.render({
elem: '#uploadBtn' // 绑定元素
,url: '/upload' // 上传接口
,multiple: true // 允许选择多个文件
,accept: 'images' // 只允许上传图片
,done: function(res, index, upload){
if(res.code == 0){
var tr = '<tr id="upload-' + index + '">' +
'<td>' + res.data.filename + '</td>' +
'<td><button class="layui-btn layui-btn-danger">删除</button></td>' +
'</tr>';
$('#fileList').append(tr);
} else {
layer.msg(res.msg);
}
}
,allDone: function(obj){
layer.msg('所有文件上传完成');
}
,error: function(){
layer.msg('上传失败');
}
});
function deleteFile(filename, index) {
layer.confirm('确定要删除这张图片吗？', function(index){
$.ajax({
url: '/delete',
type: 'POST',
data: {filename: filename},
success: function(response) {
if (response.code == 0) {
$('#upload-' + index).remove();
layer.close(index);
} else {
layer.msg('删除失败');
}
},
error: function() {
layer.msg('请求失败');
}
});
});
}
});
<p>代码解析
HTML部分：
#uploadBtn：批量上传按钮。#fileList：显示上传后的文件列表。
JavaScript部分：
multiple: true：允许选择多个文件。done方法在每个文件上传成功后执行，显示文件名并添加删除按钮。allDone方法在所有文件上传完成后执行，显示提示信息。deleteFile函数处理删除操作，使用模态框确认删除。
通过以上几种实现思路，你可以根据实际需求选择最适合的方案来实现图片上传和删除功能。希望本文对你有所帮助！
文章来源网络，作者：运维，如若转载，请注明出处：https://shuyeidc.com/wp/68607.html<
