Layui是一套非常棒的前端框架,页面简约美观,关键是非常容易上手,在开发中也是很多项目的首选。之前用Layui做过开发,现在整理一下Layui的文件上传组件,Layui上传组件页面效果看起来非常舒服,简约美观。下面来一起看看Layui图片上传组件的使用方法与参数详解吧。
一、引入插件的样式文件
访问官网:,下载Layui框架,在网页项目,引入代码:
- <link rel="stylesheet" href="static/layui/css/layui.css">
- <script src="static/js/jquery.js"></script>
- <script src="static/layui/layui.js"></script>
二、Layui单图上传功能
先在页面上添加标签文件,用于显示
- <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:layuiimage";
- //保存图片
- @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;
- }
通过以上可以实现Layui单图上传功能了,下面是效果图:
#p#
三、Layui多图片上传功能
上面是单图片上传,下面来看一下多图片上传。
先在页面上添加标签文件,用于显示
- <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多图片上传功能,下面是效果图。
四、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 |
Layui图片上传回调参数
参数选项 | 说明 | 类型 | 默认值 |
---|---|---|---|
choose | 选择文件后的回调函数。返回一个object参数,详见下文 | function | - |
before | 文件提交上传前的回调。返回一个object参数(同上),详见下文 function - | ||
done | 执行上传请求后的回调。返回三个参数,分别为:res(服务端响应信息)、index(当前文件的索引)、upload(重新上传的方法,一般在文件上传失败后使用)。详见下文 | function | - |
error | 执行上传请求出现异常的回调(一般为网络异常、URL 404等)。返回两个参数,分别为:index(当前文件的索引)、upload(重新上传的方法)。详见下文 | function | - |