layui 上传插件 带预览 非自动上传功能的实例(非常实用)

这里提供一个完整的实例，使用layui上传插件，其带有预览功能，但是不支持自动上传。

操作步骤

步骤一：引入layui文件

这里以layui的cdn方式为例：

<link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.4/css/layui.min.css">
<script src="//cdn.bootcss.com/layui/2.5.4/layui.min.js"></script>

步骤二：添加html元素

在html中添加一个上传的元素：

<div class="layui-upload-list">
  <table class="layui-table">
    <thead>
      <tr>
        <th>文件名</th>
        <th>大小</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="demoList"></tbody>
  </table>
</div>
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>

步骤三：初始化上传组件

这里我们初始化上传组件，设置一些参数，包括选择文件的按钮、文件列表、是否多选、是否自动上传、上传进度回调、上传完成回调、上传异常回调等：

layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;

  //执行实例
  var uploadInst = upload.render({
    elem: '#testList' //绑定元素
    ,url: '/upload/' //上传接口
    ,accept: 'file' //文件类型
    ,multiple: true //多文件上传
    ,auto: false //不支持自动上传
    ,bindAction: '#testListAction' //同时绑定上传按钮
    ,choose: function(obj){ //选择文件后回调
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

      //预读本地文件，防止跨域上传文件时使用
      obj.preview(function(index, file, result){
        console.log(index); //得到文件索引
        console.log(file); //得到文件对象
        console.log(result); //得到文件base64编码，比如图片
      });
    }
    ,before: function(obj){ //上传前回调
      layer.msg('正在上传，请稍后...', {
        icon: 16
        ,shade: 0.01
      })
    }
    ,done: function(res, index, upload){ //上传完毕后回调
      layer.closeAll('loading');

      if(res.code == 0){ //上传成功
        var demoText = $('#demoText');
        demoText.html('<span style="color: #6caa37;">上传成功</span>');
        return layer.msg('上传成功');
      }

      //上传失败
      layer.msg(res.msg);
    }
    ,error: function(index, upload){ //上传异常回调
      layer.closeAll('loading');
      console.log(index);
      console.log(upload);
      layer.msg('上传失败，请稍后再试');
    }
  });
});

示例说明1：大小限制

如果我们需要限制文件上传的最大尺寸，只需要在选择文件回调中添加限制即可：

,choose: function(obj){ //选择文件后回调
  obj.preview(function(index, file, result){
    //限制文件大小
    if(file.size > 5*1024*1024){ //5MB
      layer.msg('文件大小不能超过5MB');
      return;
    }

    //处理预览
    var tr = $(['<tr id="upload-'+ index +'">'
      ,'<td>'+ file.name +'</td>'
      ,'<td>'+ (file.size/1024).toFixed(1) +'KB</td>'
      ,'<td>等待上传</td>'
      ,'<td>'
        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
      ,'</td>'
    ,'</tr>'].join(''));

    //绑定删除按钮事件
    tr.find('.demo-delete').on('click', function(){
      delete files[index]; //删除文件队列已经上传的文件

      tr.remove(); //删除列表中对应的文件DOM

      uploadInst.config.elem.next()[0].value = ''; //清空input file值，以免删除后出现同名文件不可选

      layer.msg('删除成功');
    });

    demoListView.append(tr);
  });
}

在代码中，我们在选择文件回调方法中添加了文件大小限制，如果超过了5MB，将弹出提示。

示例说明2：自定义文件名

如果我们需要自定义文件名，只需要在上传接口中获取文件名并调整：

,done: function(res, index, upload){ //上传完毕后回调
  if(res.code == 0){ //上传成功
    var demoText = $('#demoText');
    demoText.html('<span style="color: #6caa37;">上传成功</span>');
    return layer.msg('上传成功');
  }

  //上传失败
  layer.msg(res.msg);

  //修改文件名
  uploadInst.config.elem.next()[0].value = res.filename;
}

在上传完成回调方法中，我们先判断上传是否成功，然后根据实际情况修改文件名即可。

总结

以上就是一个完整的layui上传组件的示例，包含了文件列表、文件类型限制、文件大小限制、上传前回调、上传完成回调、上传异常回调等。需要注意的是，这个示例不支持自动上传，如果需要自动上传，则需要在初始化组件的时候将auto参数设置为true。