前言
Layui是一套非常棒的前端框架,页面简约美观,关键是非常容易上手,在开发中也是很多项目的首选。之前用Layui做过开发,现在整理一下Layui的文件上传组件,Layui上传组件页面效果看起来非常舒服,简约美观。之前也用过Bootstrap的上传组件,这两款上传组件平分秋色,各有各的特点,总而言之,都是很实用而且很美观的上传组件,想了解BootStrap上传组件的请移步:BootStrap FileInput 文件上传组件使用指南。下面来一起看看Layui上传组件的基本用法吧。
效果图
初始状态
选择图片后
引入插件的样式文件
<link rel="stylesheet" href="static/layui/css/layui.css">
<script src="static/js/jquery.js"></script>
<script src="static/layui/layui.js"></script>
单图片上传
先在页面上添加标签文件,用于显示
<div class="layui-upload-drag" id="ongImg">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
</div><br>
<button type="button" class="layui-btn layui-btn-radius layui-btn-normal" id="imgSave">上传</button>
如果设置的是选择图片后就自动上传,就不用定义button按钮,这里是选择后不上传,点击按钮后上传所以定义了有一个按钮。
JS加载与上传图片代码
layui.use('upload', function() {
var upload = layui.upload;
upload.render({
elem: '#ongImg',
url: 'imgSave',
auto: false, //是否自动上传
accept: 'images', //指定允许上传的文件类型
bindAction: '#imgSave', //指向一个按钮触发上传
//选择文件后的回调函数
choose: function(obj){
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预读本地文件,如果是多文件,则会遍历。
obj.preview(function(index, file, result){
console.log(index); //得到文件索引
console.log(file); //得到文件对象
console.log(result); //得到文件base64编码,比如图片
//图片插入到选择框中,
$("#ongImg").html("<img src = '"+result+"' width='200px;' />");
});
},
//上传完成后回调,res为服务器端返回的数据
done: function(res){
//关闭loading
layer.close(index);
}
});
});
上面渲染时只设置了部分属性,文章最下面有Layui上传的全部参数属性。
auto设置选择图片后是否自动上传。
accept设置指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)。
bindAction设置指定按钮触发上传事件,和auto结合使用。
choose选择文件后回调函数。
将选择的图片插入选择框中显示。
$("#ongImg").html("<img src = '"+result+"' width='200px;' />");
done上传完成后回调函数
url指定上传的路径。
imgSave后台对应上传图片保存的方法,代码如下。
@RequestMapping(value = "/imgSave")
@ResponseBody
public Boolean imgSave(MultipartFile file) {
String uuid = UUID.randomUUID().toString()+".jpg";
Boolean bool = fileService.saveFile(file, uuid);
return bool;
}
其中saveFile方法为后台上传方法,返回Boolean类型参数。代码如下。
// 图片存放位置
private final static String IMAGEPATH = "e:\\layui\\image";
//保存图片
@Transactional
public boolean saveFile(MultipartFile file, String uuid) {
try {
File path = path(file.getContentType());
String filename = file.getOriginalFilename();
FileImg fileEntity = new FileImg();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date();
fileEntity.setFileName(filename);
fileEntity.setUuid(uuid);
String storeaddress = path.getAbsolutePath();
fileEntity.setStoreaddress(storeaddress);
File saveFile = new File(path, uuid);
try {
fileRepository.save(fileEntity);
file.transferTo(saveFile);
return true;
} catch (IllegalStateException | IOException e) {
e.printStackTrace();
return false;
}
} catch (Exception e) {
System.out.println("图片保存异常");
return false;
}
}
//图片地址是否存在
private File path(String filename) {
File pat = new File("e:\\layui");
File path = new File(FileService.IMAGEPATH);
if (!pat.isDirectory()) {
pat.mkdir();
}
if (!path.isDirectory()) {
path.mkdir();
}
return path;
}
上述代码就是单图片上传了,下面是效果图。
选中文件前
选择文件后
多图片上传
上面是单图片上传,下面来看一下多图片上传。
先在页面上添加标签文件,用于显示
<div class="layui-upload">
<button type="button" class="layui-btn" id="imgs">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="imgsShow"></div>
</blockquote>
</div>
JS加载与上传图片代码
layui.use('upload', function() {
var upload = layui.upload;
upload.render({
elem: '#imgs',
accept: 'images', //指定允许上传的文件类型
url: 'imgSave', //改成您自己的上传接口
multiple: true, //是否允许多文件上传
//选择文件后的回调函数
choose: function(obj){
//预读本地文件示例,
obj.preview(function(index, file, result){
$('#imgsShow').append('<img src="'+ result +'" alt="'+ file.name +'" width="200px;">')
});
},
done: function(res){
//上传完毕
}
});
});
Layui多图片上传如果不是自动上传,指定按钮上传,只会发送一次请求,也就是只会保存一张图片。所以这里设置的是选择图片后自动上传。如果有解决方法,欢迎下方留言交流。
属性设置和后台上传方法imgSave都和单图片上传一样。
上述代码就是单图片上传了,下面是效果图。
选择文件前
选择文件后
Layui上传的全部参数属性
参数选项 | 说明 | 类型 | 默认值 |
---|---|---|---|
elem | 指向容器选择器,如:elem: ‘#id’。也可以是DOM对象 | string/object | - |
url | 服务端上传接口,返回的数据规范请详见下文 | string | - |
data | 请求上传接口的额外参数。如:data: {id: ‘xxx’} | object | - |
headers | 接口的请求头。如:headers: {token: ‘sasasas’}。注:该参数为 layui 2.2.6 开始新增 | ||
accept | 指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频) | string | images |
acceptMime | 规定打开文件选择框时,筛选出的文件类型,值为用逗号隔开的 MIME 类型列表。如: acceptMime: ‘image/*’(只显示图片文件) | ||
acceptMime: ‘image/jpg, image/png’(只显示 jpg 和 png 文件) | string | images | |
exts | 允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: ‘zip |rar |7z’ 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式 | string | jpg |png |gif |bmp |jpeg |
auto | 是否选完文件后自动上传。如果设定 false,那么需要设置 bindAction 参数来指向一个其它按钮提交上传 | boolean | true |
bindAction | 指向一个按钮触发上传,一般配合 auto: false 来使用。值为选择器或DOM对象,如:bindAction: ‘#btn’ | string/object | - |
field | 设定文件域的字段名 | string | file |
size | 设置文件最大可允许上传的大小,单位 KB。不支持ie8/9 | number | 0(即不限制) |
multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean | false |
number | 设置同时可上传的文件数量,一般配合 multiple 参数出现。 | number | 0(即不限制) |
drag | 是否接受拖拽的文件上传,设置 false 可禁用。不支持ie8/9 | boolean | true |
回调
参数选项 | 说明 | 类型 | 默认值 |
---|---|---|---|
choose | 选择文件后的回调函数。返回一个object参数,详见下文 | function | - |
before | 文件提交上传前的回调。返回一个object参数(同上),详见下文 function - | ||
done | 执行上传请求后的回调。返回三个参数,分别为:res(服务端响应信息)、index(当前文件的索引)、upload(重新上传的方法,一般在文件上传失败后使用)。详见下文 | function | - |
error | 执行上传请求出现异常的回调(一般为网络异常、URL 404等)。返回两个参数,分别为:index(当前文件的索引)、upload(重新上传的方法)。详见下文 | function | - |