layui 如何多图片上传对接接口
时间: 2023-06-11 12:06:36 浏览: 99
layui 的多图片上传组件支持与后端接口进行对接,具体实现方法如下:
1. 在前端页面中引入 layui 的上传组件:
```html
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
```
2. 在页面中创建上传组件的 HTML 结构:
```html
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload">选择图片</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="uploadList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="uploadBtn">开始上传</button>
</div>
```
3. 在 JavaScript 中初始化上传组件,并设置对接的后端接口:
```javascript
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#upload', //绑定元素
url: '/upload', //上传接口
multiple: true, //支持多文件上传
auto: false, //不自动上传
acceptMime: 'image/*', //图片文件
choose: function(obj){ //选择文件后的回调函数
//将文件列表渲染到页面中
var files = obj.pushFile();
$('#uploadList').html('');
layui.each(files, function(index, file){
$('#uploadList').append('<tr id="' + file.id + '"><td>' + file.name + '</td><td>' + (file.size/1024).toFixed(1) + 'KB</td><td>等待上传</td><td><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button></td></tr>');
});
},
done: function(res, index, upload){ //上传完成的回调函数
layui.each(uploadInst.elem.next().find('input'), function(){
$(this).val('');
});
$('#uploadList').find('tr').remove();
if(res.code == 0){
//上传成功
}else{
//上传失败
}
},
error: function(index, upload){ //上传出错的回调函数
layui.each(uploadInst.elem.next().find('input'), function(){
$(this).val('');
});
$('#uploadList').find('tr').remove();
}
});
});
```
4. 在后端接口中处理上传的图片,并返回上传结果:
```php
<?php
if($_FILES){
$file = $_FILES['file'];
$tempPath = $file['tmp_name'];
$targetPath = 'uploads/' . $file['name'];
move_uploaded_file($tempPath, $targetPath);
echo json_encode(array('code' => 0, 'msg' => '上传成功'));
}else{
echo json_encode(array('code' => 1, 'msg' => '上传失败'));
}
?>
```
以上是一个简单的多图片上传的实现过程,你可以根据自己的需求进行修改和扩展。
阅读全文