layui 多图上传
时间: 2023-09-03 19:11:01 浏览: 55
Layui提供了一个非常方便的多图上传插件,可以通过以下步骤来使用它:
1. 引入Layui和Layui上传组件的JS和CSS文件:
```html
<link rel="stylesheet" href="//res.layui.com/layui/v2.5.6/css/layui.css">
<script src="//res.layui.com/layui/v2.5.6/layui.js"></script>
```
2. 编写HTML代码:
```html
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload">选择多张图片</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="preview"></div>
</blockquote>
</div>
```
3. 初始化上传组件:
```javascript
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#upload', //绑定元素
url: '/upload/', //上传接口
multiple: true, //开启多文件上传
done: function(res){
//上传完毕回调
console.log(res);
},
error: function(){
//请求异常回调
}
});
});
```
以上代码中,upload.render方法用于初始化上传组件,其中elem参数指定了触发上传的元素,url参数指定了上传的接口地址,multiple参数开启了多文件上传功能,done和error参数分别指定了上传成功和上传失败的回调函数。
4. 实现图片预览功能:
```javascript
//监听文件上传成功事件
uploadInst.on('uploadDone', function(res){
//将上传成功的图片添加到预览区域
layui.each(res.files, function(index, file){
$('#preview').append('<img src="'+file.url+'" class="layui-upload-img">')
});
});
```
以上代码中,我们监听了文件上传成功的事件uploadDone,并在回调函数中将上传成功的图片添加到预览区域中。其中res.files是一个数组,包含了上传成功的所有文件的信息,包括文件名、文件大小、文件类型和文件路径等信息。
至此,一个基本的Layui多图上传组件就完成了。需要注意的是,上传接口需要根据实际情况进行修改,同时还需要编写服务器端代码来处理上传的文件。