layui前端上传文件js代码

以下是使用 layui 实现前端上传文件的示例代码：

HTML 代码：

<div class="layui-upload">
  <button type="button" class="layui-btn" id="uploadBtn">选择文件</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>
  <button type="button" class="layui-btn" id="uploadFile">上传文件</button>
</div>

JavaScript 代码：

layui.use('upload', function() {
  var upload = layui.upload;
  
  var fileList = [];

  // 选择文件按钮点击事件
  $('#uploadBtn').on('click', function() {
    upload.render({
      elem: '#uploadBtn',
      url: '/upload/',
      accept: 'file',
      multiple: true,
      done: function(res) {
        if (res.code === 0) {
          var file = {
            name: res.data.name,
            size: res.data.size
          };
          fileList.push(file);
          renderFileList();
        } else {
          layer.msg('上传文件失败');
        }
      },
      error: function() {
        layer.msg('上传文件失败');
      }
    });
  });

  // 渲染文件列表
  function renderFileList() {
    var html = '';
    fileList.forEach(function(file, index) {
      html += '<tr>';
      html += '<td>' + file.name + '</td>';
      html += '<td>' + (file.size / 1024).toFixed(2) + 'KB</td>';
      html += '<td><button type="button" class="layui-btn layui-btn-xs layui-btn-danger" data-index="' + index + '">删除</button></td>';
      html += '</tr>';
    });
    $('#fileList').html(html);
  }

  // 删除文件按钮点击事件
  $('#fileList').on('click', '.layui-btn-danger', function() {
    var index = $(this).data('index');
    fileList.splice(index, 1);
    renderFileList();
  });

  // 上传文件按钮点击事件
  $('#uploadFile').on('click', function() {
    if (fileList.length === 0) {
      layer.msg('请选择要上传的文件');
      return;
    }
    var formData = new FormData();
    fileList.forEach(function(file) {
      formData.append('file', file);
    });
    $.ajax({
      url: '/upload/',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(res) {
        if (res.code === 0) {
          layer.msg('上传文件成功');
          fileList = [];
          renderFileList();
        } else {
          layer.msg('上传文件失败');
        }
      },
      error: function() {
        layer.msg('上传文件失败');
      }
    });
  });
});

注意，上面的示例代码需要使用 jQuery 库，同时需要在引入 layui 库之后才能使用。在示例代码中，`/upload/` 是文件上传的接口地址，需要根据实际情况进行修改。