笔记大全

layui 如何导入Excel

更新时间：2023-12-26

导入Excel的需求

对于某些情况下需要导入Excel文件的后台管理系统，后台管理员和用户可以通过上传Excel来创建和更新数据。这是寻常的一项任务，例如对于一项网上商店，管理员可能需要每天上传库存表格或客户列表，以将数据更改保存到数据库中，或者更新特定页面上的信息

layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/upload/'
    ,accept: 'file'
    ,exts: 'xls|xlsx'
    ,auto: false
    //,multiple: true
    ,choose: function(obj){        
      //重置每个上传一个文件的状态
      uploadedFileNum = 0;    //如果是提交第一个文件，不用清空也无妨           
      for(var i = 0; i < fileNameArr.length; i++){
        if(fileNameArr[i] == obj.filename){
          obj.preview(function(index,file,result){
            alert('文件' + result.name + '(' + result.size + 'KB)，已经添加过了！');          
          }) 
          return false;  
        }
      }
      //未重复文件上传        
      var files = obj.pushFile();
      //绑定上传进度
      bindUploadProgress(uploadInst);
      
      uploadIndex++;        
      //执行上传操作
      uploadInst.upload(); //执行上传      
    }
    ,before: function () {
      //上传前的回调，return false则不上传
      return $('#username').val() != '';
    }
  });
});

Excel相关的插件

在前端开发中，有许多针对导入Excel的JavaScript库，但是在使用 layui 时，不需要使用其他插件。实际上，需要用到的只是 layui 的"upload" 模块。上传Excel文件之前，要确保该模块已经被成功加载到了您的 layui 框架中。如果您的项目使用了多个模块，请使用LAYUI的config配置项将"upload"模块添加到需求列表中。

//扩展的layui配置项
layui.config({
version: "2.0.1",
base: '/js/'
}).use(['form', 'layer', 'upload'], function () {
var form = layui.form,
layer = layui.layer,
upload = layui.upload;

上传Excel到后端

当用户在页面上完成文件的选择之后，以及若有必要执行验证时，upload 模块会将 Excel数据提交至后台。每当一个文件被提交上传操作后，就会进行一次后台请求。

//文件上传完毕图片预览
upload.render({
  elem: '#test2'
  ,url: '/upload/'
  ,accept: 'file'
  ,exts: 'xls|xlsx'
  ,auto: false
  ,multiple: true
  ,bindAction: '#testListAction'
  ,before: function(obj) {
    layer.load();
  }
  ,done: function(res){
    layer.closeAll('loading');
    if(res.code == 0) {
      var fileId = res.data.fileId;
      layer.msg(fileId + '文件导入成功！', {icon: 6, time: 2000});
    } else {
      layer.msg(res.msg, {icon: 5, time: 2000});
    }
  }
  ,error: function(){
    //失败的重载处理
    layer.closeAll('loading');
    layer.msg('导入失败,请重试!', {icon: 2, anim: 5, time: 2000});
  }
})

对导入Excel文件进行验证

在实际需求中，上传的Excel文件可能包含错误或无效数据。另外，Excel文件可能包含许多不考虑处理的数据。对此，您可以在完成上传之前使用 layui.form 模块处理表单进行验证，以检查文件或数据是否正确。在上传两个Excel之后，可以看到您将会收到来自服务器端的 JSON 数据。

upload.render({
        elem: '#upload_btn',
        url: "/excel/uploadExcel",
        exts: 'xls|xlsx',
        accept: 'file',
        method: 'post',
        size: 51200,
        auto: false,
        before: function(obj){
            $(".check_excel_flag").hide();
            obj.preview(function(index, file, result){
                $(".upload_excel_filename").text(file.name.substring(0, 15) + "...").show();
                $(".check_excel_flag").hide();
            });
        },
        done: function(res){
            if(res.code == 200){
                $(".check_excel_flag").show().addClass("check-pass").text('PASS');
                $(".check_excel_flag").removeClass("check-failed");
            }else{
                $(".check_excel_flag").show().addClass("check-failed").text('FAILED');
                $(".check_excel_flag").removeClass("check-pass");
            }
        },

        error: function(){
            $(".check_excel_flag").show().addClass("check-failed").text('FAILED');
            $(".check_excel_flag").removeClass("check-pass");
        }
});

c语言编程笔录