<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layui 图片上传示例</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<style>
.upload-container {
display: flex; /* 使用 flex 布局 */
align-items: center; /* 垂直居中对齐 */
}
.layui-btn {
margin-right: 20px; /* 按钮和图片之间的间距 */
}
#previewArea img {
width: 100px; /* 控制图片的大小 */
height: auto;
}
</style>
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">
<div class="upload-container">
<button type="button" class="layui-btn" id="uploadBtn">
<i class="layui-icon"></i> 上传图片
</button>
<div class="layui-row" id="previewArea">
<!-- 图片预览显示区域 -->
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use('upload', function () {
var upload = layui.upload;
// 执行实例
var uploadInst = upload.render({
elem: '#uploadBtn', // 绑定元素
url: 'http://10.1.8.206:8090/upload', // 上传接口
accept: 'images', // 只允许上传图片
acceptMime: 'image/*', // 允许的文件类型
before: function (obj) {
// 上传前回调
console.log('准备上传...');
},
done: function (res) {
// 上传成功后的回调
if (res.msg.status === 0) {
alert('上传成功');
// 图片上传成功，调用回调显示上传的图片
var imgHtml = '<img src="' + res.msg.src + '" alt="上传的图片">';
document.getElementById('previewArea').innerHTML = imgHtml;
} else {
alert('上传失败');
}
},
error: function () {
// 上传失败的回调
alert('上传出现问题');
}
});
});
</script>
</body>
</html>
