Layui图片上传组件的使用方法与参数详解

时间:2021-11-24
类别:教程 - 网页设计

Layui是一套非常棒的前端框架,页面简约美观,关键是非常容易上手,在开发中也是很多项目的首选。之前用Layui做过开发,现在整理一下Layui的文件上传组件,Layui上传组件页面效果看起来非常舒服,简约美观。下面来一起看看Layui图片上传组件的使用方法与参数详解吧。

一、引入插件的样式文件

访问官网:,下载Layui框架,在网页项目,引入代码:

  1. <link rel="stylesheet" href="static/layui/css/layui.css"
  2.  
  3. <script src="static/js/jquery.js"></script> 
  4.  
  5. <script src="static/layui/layui.js"></script> 

二、Layui单图上传功能

先在页面上添加标签文件,用于显示

  1. <div class="layui-upload-drag" id="ongImg"
  2.  
  3.     <i class="layui-icon"></i> 
  4.  
  5.     <p>点击上传,或将文件拖拽到此处</p> 
  6.  
  7. </div><br> 
  8.  
  9. <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" id="imgSave">上传</button> 

如果设置的是选择图片后就自动上传,就不用定义button按钮,这里是选择后不上传,点击按钮后上传所以定义了有一个按钮。

JS加载与上传图片代码:

  1. layui.use('upload'function() { 
  2.  
  3.     var upload = layui.upload; 
  4.  
  5.     upload.render({ 
  6.  
  7.         elem: '#ongImg'
  8.  
  9.         url: 'imgSave'
  10.  
  11.         auto: false,    //是否自动上传 
  12.  
  13.         accept: 'images',   //指定允许上传的文件类型 
  14.  
  15.         bindAction: '#imgSave',  //指向一个按钮触发上传 
  16.  
  17.         //选择文件后的回调函数 
  18.  
  19.         choose: function(obj){ 
  20.  
  21.             //将每次选择的文件追加到文件队列 
  22.  
  23.             var files = obj.pushFile(); 
  24.  
  25.             //预读本地文件,如果是多文件,则会遍历。 
  26.  
  27.             obj.preview(function(index, file, result){ 
  28.  
  29.                 console.log(index); //得到文件索引 
  30.  
  31.                 console.log(file); //得到文件对象 
  32.  
  33.                 console.log(result); //得到文件base64编码,比如图片 
  34.  
  35.                 //图片插入到选择框中, 
  36.  
  37.                 $("#ongImg").html("<img src = '"+result+"' width='200px;' />"); 
  38.  
  39.             }); 
  40.  
  41.         }, 
  42.  
  43.         //上传完成后回调,res为服务器端返回的数据 
  44.  
  45.         done: function(res){ 
  46.  
  47.             //关闭loading 
  48.  
  49.             layer.close(index); 
  50.  
  51.         } 
  52.  
  53.     }); 
  54.  
  55. }); 

上面渲染时只设置了部分属性,文章最下面有Layui上传的全部参数属性。

auto设置选择图片后是否自动上传。

accept设置指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)。

bindAction设置指定按钮触发上传事件,和auto结合使用。

choose选择文件后回调函数。

将选择的图片插入选择框中显示。

  1. $("#ongImg").html("<img src = '"+result+"' width='200px;' />"); 

done上传完成后回调函数

url指定上传的路径。

imgSave后台对应上传图片保存的方法,代码如下。

  1. @RequestMapping(value = "/imgSave"
  2.  
  3. @ResponseBody 
  4.  
  5. public Boolean imgSave(MultipartFile file) { 
  6.  
  7.     String uuid = UUID.randomUUID().toString()+".jpg"
  8.  
  9.     Boolean bool = fileService.saveFile(file, uuid); 
  10.  
  11.     return bool; 
  12.  

其中saveFile方法为后台上传方法,返回Boolean类型参数。代码如下。

  1. // 图片存放位置 
  2.  
  3. private final static String IMAGEPATH = "e:layuiimage"
  4.  
  5.  
  6.  
  7. //保存图片 
  8.  
  9. @Transactional 
  10.  
  11. public boolean saveFile(MultipartFile file, String uuid) { 
  12.  
  13.     try { 
  14.  
  15.         File path = path(file.getContentType()); 
  16.  
  17.         String filename = file.getOriginalFilename(); 
  18.  
  19.         FileImg fileEntity = new FileImg(); 
  20.  
  21.         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 
  22.  
  23.         Date date = new Date(); 
  24.  
  25.         fileEntity.setFileName(filename); 
  26.  
  27.         fileEntity.setUuid(uuid); 
  28.  
  29.         String storeaddress = path.getAbsolutePath(); 
  30.  
  31.         fileEntity.setStoreaddress(storeaddress); 
  32.  
  33.         File saveFile = new File(path, uuid); 
  34.  
  35.         try { 
  36.  
  37.             fileRepository.save(fileEntity); 
  38.  
  39.             file.transferTo(saveFile); 
  40.  
  41.             return true; 
  42.  
  43.         } catch (IllegalStateException | IOException e) { 
  44.  
  45.             e.printStackTrace(); 
  46.  
  47.             return false; 
  48.  
  49.         } 
  50.  
  51.     } catch (Exception e) { 
  52.  
  53.         System.out.println("图片保存异常"); 
  54.  
  55.         return false; 
  56.  
  57.     } 
  58.  
  59.  
  60.  
  61.  
  62. //图片地址是否存在 
  63.  
  64. private File path(String filename) { 
  65.  
  66.     File pat = new File("e:layui"); 
  67.  
  68.     File path = new File(FileService.IMAGEPATH); 
  69.  
  70.     if (!pat.isDirectory()) { 
  71.  
  72.         pat.mkdir(); 
  73.  
  74.     } 
  75.  
  76.     if (!path.isDirectory()) { 
  77.  
  78.         path.mkdir(); 
  79.  
  80.     } 
  81.  
  82.     return path; 
  83.  

通过以上可以实现Layui单图上传功能了,下面是效果图:

#p#

三、Layui多图片上传功能

上面是单图片上传,下面来看一下多图片上传。

先在页面上添加标签文件,用于显示

  1. <div class="layui-upload"
  2.  
  3.     <button type="button" class="layui-btn" id="imgs">多图片上传</button> 
  4.  
  5.     <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"
  6.  
  7.         预览图: 
  8.  
  9.         <div class="layui-upload-list" id="imgsShow"></div> 
  10.  
  11.     </blockquote> 
  12.  
  13. </div> 

JS加载与上传图片代码

  1. layui.use('upload'function() { 
  2.  
  3.     var upload = layui.upload; 
  4.  
  5.     upload.render({ 
  6.  
  7.         elem: '#imgs'
  8.  
  9.         accept: 'images',   //指定允许上传的文件类型 
  10.  
  11.         url: 'imgSave'//改成您自己的上传接口 
  12.  
  13.         multiple: true, //是否允许多文件上传 
  14.  
  15.         //选择文件后的回调函数 
  16.  
  17.         choose: function(obj){ 
  18.  
  19.             //预读本地文件示例, 
  20.  
  21.             obj.preview(function(index, file, result){ 
  22.  
  23.                 $('#imgsShow').append('<img src="'+ result +'" alt="'+ file.name +'" width="200px;">'
  24.  
  25.             }); 
  26.  
  27.         }, 
  28.  
  29.         done: function(res){ 
  30.  
  31.             //上传完毕 
  32.  
  33.         } 
  34.  
  35.     }); 
  36.  
  37. }); 

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 -
    收藏