layui的upload组件使用和上传阻止

一、Layui的upload组件使用

Layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

upload 组件是 Layui 中的一个文件上传组件，支持多文件上传，也可以在上传前对文件进行过滤等操作，非常实用。下面就来看一下如何使用这个组件。

1. 引入CSS和JS文件

在使用前需要将 Layui 的 CSS 和 JS 文件引入到页面中。这里我使用的是CDN方式引入，当然也可以下载到本地后引入。

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css" integrity="sha384-vod1/sany/Iik2EnMOI1oF80W1wS4pZ/ns6fjX1cT7X01kYW8Rv6SBRCddakpu9I" crossorigin="anonymous">
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js" integrity="sha384-SmJ/6LWgX6xZGzcpwQ5r/J3pqtOTDtaT3yQq4I/9+OqO9wknUQqz8oJL/1gi6t2b" crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js" integrity="sha384-mLZCWIWLjd4m5TaABPlO4g8c2p53jo7nLJ0VquAU+04BzBcOtnGm/bXQB/QOu39k" crossorigin="anonymous"></script>

2. 编写HTML代码

在 HTML 中需要准备一个容器，将 upload 组件放置其中。这里使用一个表单来演示上传文件。

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">文件上传</label>
    <div class="layui-input-block">
      <button type="button" class="layui-btn" id="upload"><i class="layui-icon"></i>上传文件</button>
      <div class="layui-upload-list">
        <table class="layui-table">
          <thead><tr><th>文件名</th><th>大小</th><th>操作</th></tr></thead>
          <tbody id="fileList"></tbody>
        </table>
      </div>
    </div>
  </div>
</form>

通过一个按钮触发文件的选择以及上传操作，同时在页面中以表格的形式列出已经选择的文件，便于用户查看以及操作。这个按钮的 ID 设置为 upload，数据展示的位置使用了一个 tbody，ID 设置为 fileList。

3. 编写JavaScript代码

下面来看一下 JavaScript 的代码，其中包含了上传前的必要参数配置以及上传后的回调函数。

<script>
layui.use(['upload', 'layer'], function() {
  var upload = layui.upload,
      layer = layui.layer;
  var uploadInst = upload.render({
    elem: '#upload',
    url: 'test.php',
    acceptMime: 'image/*',
    exts: 'jpg|png|gif|bmp|jpeg',
    multiple: true,
    auto: false,
    bindAction: '',
    number: 0,
    data: {},
    choose: function(obj){},
    before: function(obj){
      this.data = {
        timestamp: +new Date(),
        token: '123456'
      };
      layer.load(2);
    },
    done: function(res, index, upload){
      layer.closeAll('loading');
      if(res.code == 0){
        var tr = '<tr><td>'+res.data.filename+'</td><td>'+res.data.size+'</td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-danger">删除</button></td></tr>';
        $('#fileList').append(tr);
      }else{
        layer.msg(res.msg, {icon: 2});
      }
    },
    error: function(index, upload){
      layer.closeAll('loading');
      layer.msg('上传失败，请重试', {icon: 2});
    }
  });
});
</script>

注意，这里上传的地址为“test.php”，实际使用时需要根据自己的需求修改，同时上传后的返回值也需要根据自己的实际情况来编写。

二、上传阻止

有时候在上传文件时需要对上传的文件进行一些判断，如果不符合条件就需要阻止上传。upload 组件提供了 before 参数，可以用来在上传前对文件进行一些操作。

1. 过滤文件类型

在 before 函数中可以通过 obj.file.type 获取到文件类型，可以根据需要对文件类型进行判断，如果不符合要求就使用 layui 提供的 layer 组件弹出提示，并返回 false 阻止上传。

before: function(obj){
  if(obj.file.type.indexOf('image') == -1){
    layer.msg('请上传图片文件', {icon: 2});
    return false;
  }
}

2. 过滤文件大小

在 before 函数中还可以通过 obj.file.size 获取到文件大小，可以根据需要对文件大小进行判断，例如限制文件大小不能超过 2MB。

before: function(obj){
  if(obj.file.size > 1024*1024*2){
    layer.msg('文件大小不能超过2MB', {icon: 2});
    return false;
  }
}

通过 before 函数可以方便地对上传文件进行过滤，保障上传文件的正确性和安全性。

三、总结

通过本文的介绍，相信大家已经学会了如何使用 layui 的 upload 组件进行文件上传，以及如何使用 before 参数阻止上传。在实际的项目开发中，upload 组件会非常实用，可以帮助我们实现文件上传的功能。同时，通过 before 参数的使用，也可以更好地控制上传文件的内容和大小，提高了上传的安全性。