主要文件引用:
<script type="text/javascript" src="./resource/js/fileinput.min.js"></script>
<script type="text/javascript" src="./resource/js/fileinput_locale_zh.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./resource/css/fileinput.min.css">
1. html主要代码(以下代码本人放在一个modal)
<form id="importForm" enctype="multipart/form-data" method="post">
<input id="inputFile" type="file" class="file" name="excelFile" data-show-upload="false"><br>
</form>
<div id="progressDiv">
<jsp:include page="progress.jsp"></jsp:include>
</div>
备注:一开始要先把progressDiv隐藏,导入文件的时候再显示出来,progress(进度条)样式代码:
<style>
@-webkit-keyframes progressbar {
from {
width:0
}
to {
width: 100%
}
}
/* Standard syntax */
@keyframes progressbar {
from {
width:0
}
to {
width: 100%
}
}
.progress-bar {
-webkit-transition: width .4s ease;
-moz-transition: width .4s ease;
transition: width .4s ease;
-webkit-animation: progressbar 4s infinite;
animation: progressbar 4s infinite
}
</style>
<div class='progress'>
<div class='progress-bar' role='progressbar' aria-valuenow='60'
aria-valuemin='0' aria-valuemax='100'></div>
</div>
2. 页面初始化设置中文
$(function() {
$("#inputFile").fileinput({
language: 'zh'
});
});