layui怎么上传多张图片
时间: 2024-10-06 09:03:07 浏览: 27
layui实现多图片上传并限制上传的图片数量
LayUI是一个轻量级的前端组件库,用于快速构建企业级Web应用。如果你想在layui中实现上传多张图片,你可以利用它的Upload控件配合FileReader API。以下是一个基本示例:
首先,你需要引入layui和layui Upload模块:
```html
<link rel="stylesheet" href="https://www.layui.com/static/css/layui.css">
<script src="https://cdn.layui.com/layui/layui.js"></script>
<script src="https://cdn.layui.com/layui/upload/layui.upload.min.js"></script>
```
然后,在HTML里创建一个上传区域:
```html
<div id="upload-demo" lay-upload="{url:'你的服务器接收文件的URL', fieldName:'file'}"></div>
```
接下来,配置Upload组件:
```javascript
layui.use(['upload'], function(){
var upload = layui.upload;
// 指定上传文件的大小限制(单位 MB)
upload.render({
elem: '#upload-demo'
, url: '你的服务器接收文件的URL' // 服务器端接受文件的接口
, field: 'file' // 或者你想用的名字
, type: 'post' // 提交方式
, accept: 'img/*' // 只允许上传jpg/png等图片
, auto: true // 是否自动上传
, before: formData => {
// 在发送前对表单里的formdata做处理
}
, done: data => {
console.log(data) // 文件上传成功后的回调
}
, error: err => {
console.error(err) // 上传失败的回调
}
});
});
```
用户可以选择多张图片后,点击按钮开始上传。`accept`属性限制了只能选择图片,你可以根据需求修改。
阅读全文