这段代码展示了如何使用HTML、CSS和JavaScript实现一个文件上传和校验功能。用户可以选择xls或xlsx文件，点击校验按钮进行文件格式检查，通过后可以下载校验文件或立即导入。导入完成后，系统会显示导入完成情况。
html
html
<div style='padding: 1% 2%'>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
<legend>上传工单<span class='tips'>(<span class='star'>*</span>注：支持导入xls或xlsx文件)</span></legend>
</fieldset>
<form action="importBuildingInfo.action" id="msgForm" method="post" enctype="multipart/form-data" class="layui-form">
<div class="layui-row">
<div class="layui-col-xs4 top">
<div class='import form-control'>
<span>请选择要导入的文件</span>
<input type="file" name="file" onchange="getfilename(this);" class="form-control input-sm replyField"/>
<!-- 文件通过校验后，服务器会返回文件名，赋给returnFileName，可以不用再二次上传文件 -->
<input type="hidden" id="returnFileName" name="returnFileName" >
</div>
</div>
<div class="layui-col-xs6 top ">
<button type="button" id="checkBtn" class="btn btn-primary btn-sm">校验</button>
<button type="button" id="download" class="btn btn-success btn-sm no">点我下载文件查看数据</button>
<button type="button" id="importBtn" class="btn btn-danger btn-sm no">立即导入</button>
</div>
</div>
</form>
<div class="importPro no">
<div><i class="layui-icon icn"></i> <span class='reasonTitle'>导入完成情况</span></div>
<div class="pro"></div>
</div>
</div>
css
css
.import{
display: block;
width:90%;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
position: relative;
text-decoration: none;
cursor: pointer;
height:30px;
line-height:30px;
}
.import>input{
width:90%;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
cursor: pointer;
}
.star {color: red;}
.import>span{color:#999; cursor: pointer}
.importForm{padding: 5px}
.reason{margin-top:15px;}
.icn{margin-right:10px;color:#267BFC}
.ion{margin-right:4px}
.importPro .icn{color:#ccc;margin-left:20px}
.importPro{ margin-top:20px;font-size:13px;color:#fff}
.pro{padding:10px 25px}
.no{display:none}
.tips{font-size:12px;color:#999;margin-left:5px;}
.tips>.star{margin:0px 3px}
.pro>div{margin-left:20px}
#indexBtn:hover{border-bottom:1px #428bca dashed;color:#428bca}
.layui-elem-field legend{font-size:16px;color:#fff}
.layui-elem-field{border-color: #0d54a3}
js
js
layui.use('layer', function(){
let layer=layui.layer;
//校验按钮
$('#checkBtn').click(function(){//
if($('.replyField').val()){
$('.loadingbox').show()
setTimeout(function(){
importBuildingInfo('checkImportBuildingInfo.action','check')
},5)
//成功后在隐藏，此处模拟 此处逻辑：当校验成功后选择文件的框应当禁止选择，以防导入和校验的值不一样，或者进行了误操作
}else{
layer.msg('请先选择文件，再进行校验操作！')
}
})
//下载按钮
$('#download').click(function(){
if(fileName){
var href=window.location.href;
var list = href.split("/");
var file=list[0]+"//"+list[2]+"/"+list[3]+fileName;
window.location.href=file;
setTimeout(function(){
window.location.reload()//刷新页面
},5000)
}
})
//导入按钮
$('#importBtn').click(function(){
if($('.replyField').val()){
$('.loadingbox').show()
setTimeout(function(){
importBuildingInfo('importBuildingInfo.action','import')
},5)
}else{
layer.msg('请先进行校验，再进行导入操作！')
}
})
//下载模板
$('#template').click(function(){
window.open('downloadImportBuildingInfoTemplate.action')
})
})
//选择文件获取文件名称
function getfilename(el){
var _el = el.files;
var fileext=_el[0].name.substring(_el[0].name.lastIndexOf("."),_el[0].name.length)
fileext=fileext.toLowerCase()
if (!(fileext=='.xls' || fileext=='.xlsx')){
$('.replyField').val('')
$('.import span').html('请选择要导入的文件');
layer.msg('对不起，导入数据格式必须是xls或xlsx格式文件哦，请您调整格式后重新上传，谢谢 ！', {icon: 2});
return
}else{
$('.import span').html(_el[0].name);
}
}
function importBuildingInfo(url,type){
var formData = new FormData($("#msgForm")[0]);
$.ajax({
url:url,
type:'POST',
async : false,
data:formData,
processData:false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
dataType:"json",
success: function(res) {
$('.loadingbox').hide()
if(type=='check'){
checkFun(res)
}else{
importFun(res)
}
},
error:function(err){
layer.msg('程序出错，请刷新后重试，或联系管理员', {icon: 2});
$('.loadingbox').hide()
}
});
}
function checkFun(res){
if(res.code==1){//通过，隐藏校验，和下载按钮，显示导入
layer.msg('校验通过，请点击导入按钮导入数据！', {icon: 1});
$("#returnFileName").val(res.returnFileName);
$('#importBtn').show()//校验成功 显示导入按钮
$('.replyField,#checkBtn,#download').hide()//校验成功选择文件、校验、下载按钮隐藏
}else if(res.code==2){//如果数据不通过
fileName=res.fileName//路径
layer.msg('校验完成！部分数据错误，请下载文件查看详细信息。', {icon: 2});
$('#importBtn,#checkBtn').hide()//校验失败导入按钮隐藏
$('#download').show()//校验失败
}else{//程序出错
layer.msg(res.msg, {icon: 6});
$('#importBtn,#download').hide()
}
if(res.excelNum){
$('.importPro').show()
$('.reasonTitle').text('校验完成情况')
$('.pro').empty()
let errorRowNum=res.errorRowNum.join(',');let row='';let str='';
var newarr=group(res.errorRowNum,10)
let html=`<div>校验完成<br/>文档总记录条数：${res.excelNum}<br/>本次错误单元格数：${res.errorNum}</div>`
if(res.errorRowNum.length>0){
for(let i=0;i<newarr.length;i++){
str+=newarr[i].join(',')+'<br/>'
}
row=`<div class='reason'>错误行号：<div>${str}</div></div>`
}
$('.pro').append(html+row)
}
}
function importFun(res){
$('.replyField').show()//当导入成功后，给上传解除禁止
if(res.code==0){//成功
layer.msg('导入成功', {icon: 1});
$('.importPro,#checkBtn').show()
$('#importBtn,#download').hide()
$('.import span').html('请选择要导入的文件');
$('.replyField').val('')
$('.pro').empty()
if(res.importNum){
$('.importPro').show()
$('.reasonTitle').text('导入完成情况')
let html=`<div>导入完成<br/>文档总记录条数：${res.excelNum}<br/>本次导入总记录条数：${res.importNum}</div>`
$('.pro').append(html)
}
}else{
layer.msg('导入失败,请重新导入', {icon: 2});
}
}
// 把一个数组按照一定长度分割成若干数组
function group(array, subGroupLength) {
let index = 0;
let newArray = [];
while(index < array.length) {
newArray.push(array.slice(index, index += subGroupLength));
}
return newArray;
}
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
