Java導入Excel文件頁面實現JS

Excel導入：

    頁面創建導入按鈕，如：

代碼：

<button class="layui-btn layui-btn-small layui-btn-primary ajax-all fun_UPLOAD_" id="upload" onclick="upload()">
    <i class="iconfont icon-daoru"></i>導入交易
</button>

JS：

function upload(){
    layer.open({
    	type : 2, //層類型
		title :'導入文件', //標題
		shadeClose : true,	//是否點擊遮罩關閉
		shade : [ 0.4, '#000' ],  //遮罩
		maxmin : false,   //開啟最大化最小化按鈕
		area : [ '460px', '350px' ],	//設置寬高
		offset : '5px',	//坐標，默認：垂直水平居中
		moveout : true,	//是否允許拖拽到窗口外
                content : "" //iframe的url //內容這里是路徑
    })
}
    

可以將上傳文件放入form表單中，上傳文件框用input框的file類型，如：

<input type="file" name="excelFile" id="file" lay-type="file" class="layui-upload-file" onchange="upfile.value=this.value">

    點擊確定時submit提交表單，js如下所示：

function submit(){
	//提交前校驗
	if(!checkDate()){
		return;
	}
	//定義並開啟上傳時讀取效果
	var msgIndex = layer.load(1, {
		shade: [0.4,'#def'], //0.4透明度的白色背景
		icon :　'&#xe63d'
	});
	//上傳
	$("#addMore").ajaxSubmit({
		type : "post",
		url : Const.apiUrl + "", //上傳路徑
		dataType : "json",
		success : function(resp){
			layer.close(msgIndex);//關閉效果
			if(resp.code == 200){
				layer.open({
					area: ['40%', '60%'],
					title: '導入文件',
					content: '成功導入信息'+resp.data+'條',
					 btn : ['確定'],
						yes : function(index, layero) {	            	
							 layer.closeAll(); 
						 }
				}); 
			}else{
				layer.msg("導入失敗！");
			}
		},
		error : function(code) {
			layer.close(msgIndex);
			layer.msg("服務器錯誤,導入失敗！");
		}
	});	
}
function checkDate(){
	//獲取上傳的文件路徑
	var fileName = $("#file").val(); 
	//獲取上傳的文件名
	var fName = fileName.substring(fileName.lastIndexOf("\\")+1,fileName.lastIndexOf("."));
	//獲取上傳的文件后綴
	var fType = fileName.substr(fileName.lastIndexOf("."));
	//判斷有沒有文件
	if(fName == ""){
		layer.msg("請選擇需要導入的.xls或者.xlsx文件！");
		return false;
	}
	//判斷文件格式是否正確
	if(!fType || fType.toLowerCase()!=".xls" && fType.toLowerCase()!=".xlsx"){
		layer.msg("請選擇.xls或者.xlsx格式的文件導入！");
		return false；
	}
	return true;
}

以上為前端頁面代碼，后端代碼可參考：

　　https://www.cnblogs.com/Big-Boss/p/10007807.html
　　https://blog.csdn.net/u011278387/article/details/50839034

　　https://blog.csdn.net/u012012240/article/details/53929141

　　https://www.cnblogs.com/GoForMyDream/p/5912737.html