layui实现文件上传（前端）

前端

功能概述

前端提供一个上传按钮，选择Excel文件，将文件提交给后端。这里前端框架使用的是layui，以及内置组件。前端部分代码只是整合了在学习过程中的内容，大多数在官网是可以找到的。

css样式引用

这里使用的是我项目中的相对路径，如有使用换成自己的路径即可：

	<link rel="stylesheet" type="text/css" href="../common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="../common/global.css" media="all">
	<link rel="stylesheet" type="text/css" href="../css/personal.css" media="all">

js样式引用

注意路径：

	<script type="text/javascript" src="../common/layui/layui.all.js"></script>
	//这是引用的js文件
	<script type="text/javascript" src="../jslib/teacherImport.js"></script>

html代码

这里都是参考layui官网上的组件，如果想要其他的样式可以自行前往--------> layui官网,选择想要的样式;

	<form class="layui-form">
		<div class="layui-upload"> 
		  <button type="button" class="layui-btn layui-btn-normal" id="cfile" style="margin-left:30px">选择文件</button> 
		  <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" id="uploadBegin" style="margin-left:30px">开始上传</button>
		  <a type="button" class="layui-btn layui-btn-danger" href="../../teacher/download"  style="margin-left:30px">模板下载</a>
		 <div class="layui-upload-list" style="height:25px;"></div>
		</div> 
	</form>

teacherImport.js代码

这块代码来自layui官网上传组件的js，基本相同，可以直接使用，或者根据自己的需求进行更改

layui.use('upload', function(){
  var $ = layui.jquery,
  upload = layui.upload; //声明上传组件

  //文件列表示例
  var num="" ;var show ="";
  var demoListView = $('#demoList'),//上传表格的详情
  uploadListIns = upload.render({//渲染
    elem: '#cfile',//绑定选择文件按钮
    url: '../../teacher/import',//后端接口
    accept: 'file',//允许上传文件类型
    multiple: true,//是否允许多文件上传开关
    auto: false,//是否自动上传，true就是选择完文件之后自动上传
    bindAction: '#uploadBegin',//绑定开始上传按钮，如果自动上传则不需要这个按钮
    choose: function(obj){   
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td id="filename">'+ file.name +'</td>'
          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
            ,'<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();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        demoListView.append(tr);
      });
    },
    before:function(){//这里暂时规定一次只能上传一个文件
    	var filenum = $("tr").length;
    	var file = $("#filename").text();
    	var ext = file.slice(file.lastIndexOf(".")+1).toLowerCase();  
		if(filenum>2){
			layer.msg("一次只能上传一个文件");  
			return false;
		}
    	if(file==null || file ==""){
			layer.msg("请选择文件");  
			return false;  
		}
		else if (("xls" != ext)&&("xlsx" != ext) ) {  
	        layer.msg("所选择文件不规范");  
	        return false; 
	    }
	},
    done: function(res, index, upload){
    	show = layer.msg('上传中，请稍候',{icon: 16,time:true,shade:0.8});
      if(res.code == 0){ //上传成功
    	var tr = demoListView.find('tr#upload-'+ index),
    	tds = tr.children(); 
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        //tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload,res);
      layer.close(show);
    }, 
    error: function(index, upload,res){
      var tr = demoListView.find('tr#upload-'+ index),
      tds = tr.children(); 
      tds.eq(2).html('<span style="color: #FF5722;">上传失败:'+res.msg+'</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
   }
  });
	//这里在点击上传是添加了一个文件类型的判断
	$(window).one("resize",function(){
		$(".import").click(function(){//上传按钮
			var file=document.getElementById("teacherFile").value; 
			var ext = file.slice(file.lastIndexOf(".")+1).toLowerCase();  
			if(file==null || file ==""){
				layer.msg("请选择文件");  
			}
			else if (("xls" != ext)&&("xlsx" != ext) ) {  
		        layer.msg("所选择文件不规范");  
		        return false;  
		    }
			else {
				layer.msg("选择文件规范");  
			}
		})
		
	}).resize();
})

效果图

选择文件后：

前端部分大多数来自layui官网，下一篇文章会介绍在后端接口怎么获取文件数据插入数据库。
后端部分可以跟其他的前端框架结合，只要能获取到文件即可以。