最近在做bootstrap的项目，遇到过一些问题，但是在网上找的东西总不是很全面，但是项目还是要做的，所有就自己一边网上找，一边自己琢磨，现在整理了一下 希望你们能看懂。谢谢
1.先导入js哦，定义一个button
<script type="application/javascript" src="/lib/js/jquery-3.1.1.js"></script>
<script type="application/javascript" src="/lib/js/fileinput.js"></script>
<script type="text/javascript"
src="/lib/js/zh.js"></script>
<div class="alarm">
<button class="btn btn-primary" id="upload">批量导入</button>
</div>
2.创建批量导入模态框
<!--批量导入操作-->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">文件上传</h4>
</div>
<div class="modal-body">
<input id="f_upload" type="file" name="file"/>
</div>
</div>
</div>
</div>
3.js代码
<script>
$(function(){
initUpload();
$("#upload").on("click",function(){
//店家批量导入按钮 显示模态框
$("#myModal").modal("show");
});
})
function initUpload(){
$("#f_upload").fileinput({
language: 'zh',//设置语言
uploadUrl: "/eaxmManager/eaxm/importExam",//上传的地址
allowedFileExtensions: ["xls", "xlsx"],//接收的文件后缀
dropZoneTitle: '可以将文件拖放到这里',
uploadAsync: true, //默认异步上传
showPreview: true,//是否显示预览
showUpload: true,//是否显示上传按钮
showRemove: true, //显示移除按钮
showCancel:true, //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
showCaption: true,//是否显示文件标题，默认为true
browseClass: "btn btn-primary", //文件选择器/浏览按钮的CSS类。默认为btn btn-primary
dropZoneEnabled: true,//是否显示拖拽区域
maxFileSize: 0,//最大上传文件数限制，单位为kb，如果为0表示不限制文件大小
minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
maxFileCount: 1, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>
previewFileIconSettings: {
'docx': '<i ass="fa fa-file-word-o text-primary"></i>',
'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
'xls': '<i class="fa fa-file-excel-o text-success"></i>',
'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
'pdf': '<i class="fa fa-file-archive-o text-muted"></i>',
'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
},
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",//字符串，当文件数超过设置的最大计数时显示的消息 maxFileCount。默认为：选择上传的文件数（{n}）超出了允许的最大限制{m}。请重试您的上传！
elErrorContainer: '#kartik-file-errors'
}).on("fileuploaded", function(event, data, previewId, index) {
//导入成功后 隐藏模态框，我这是隐藏所有的模态框
$(".modal").modal("hide");
//导入成功够刷新当前table 根据自己项目改$("#examTable") 即可
$("#examTable").bootstrapTable('refresh');
console.log("fileuploaded");
console.log("event"+event);
console.log("data"+data);
console.log("previewId"+previewId);
console.log("index"+index);
}).on('fileerror', function(event, data, msg) {
console.log("fileerror");
console.log("event"+event);
console.log("data"+data);
console.log("msg"+msg);
});
}
</script>
4.点击批量导入按钮，显示模态框如下图，点击选择导入excel，点击上传即可
5.serviceImpl层，相关的注释写的很清楚注意看下面（注意下面是在第几个单元格开始读取）
@Override
public int insertExam(MultipartFile file) throws Exception {
int result = 0;
//存放excel表中所有user数据
List<EaxmDTO> eaxmList = new ArrayList<>();
//file.getOriginalFilename()方法 得到上传时的文件名
String fileName = file.getOriginalFilename();
//截取文件名的后缀
String suffix = fileName.substring(fileName.lastIndexOf(".")+1);
//file.getInputStream()方法 返回InputStream对象 读取文件的内容
InputStream ins = file.getInputStream();
Workbook wb = null;
/*判断文件后缀
XSSF － 提供读写Microsoft Excel OOXML XLSX格式档案的功能。
HSSF － 提供读写Microsoft Excel XLS格式档案的功能。*/
if(suffix.equals("xlsx")){
wb = new XSSFWorkbook(ins);
}else{
wb = new HSSFWorkbook(ins);
}
//获取excel表单的sheet对象
Sheet sheet = wb.getSheetAt(0);
//如果sheet不为空，就开始遍历表中的数据
if(null != sheet){
//line = 1 :从表的第2行开始获取记录
for(int line = 1; line <= sheet.getLastRowNum();line++){
//excel表单的sheet的行对象
Row row = sheet.getRow(line);
//如果某行为空，跳出本行
if(null == row){
continue;
}
//获取第一个单元格的内容
//表示获取单元格中的内容是String字符串类型
row.getCell(0).setCellType(Cell.CELL_TYPE_STRING);
String examti = row.getCell(0).getStringCellValue();
//这解决的是单元格内读取的日期是天（写的是年月日，但是读取后变成了总天数），需要休眠操作在转换成年月日格式
Calendar calendar = new GregorianCalendar(1900,0,-1);
Date d = calendar.getTime();
Date examtime = DateUtils.addDays(d,Integer.valueOf(examti);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String timeFormat = sdf.format(examtime);
//获取第二个单元格的内容
//格式是number
Double sbp = row.getCell(1).getNumericCellValue();
//获取第三个单元格的内容
Double dbp = row.getCell(2).getNumericCellValue();
Double bmi = row.getCell(3).getNumericCellValue();
Double whr = row.getCell(4).getNumericCellValue();
Double bun = row.getCell(5).getNumericCellValue();
Double ua = row.getCell(6).getNumericCellValue();
Double crea = row.getCell(7).getNumericCellValue();
Double tg = row.getCell(8).getNumericCellValue();
Double chol = row.getCell(9).getNumericCellValue();
Double glu = row.getCell(10).getNumericCellValue();
Double hcy = row.getCell(11).getNumericCellValue();
Double mAlb = row.getCell(12).getNumericCellValue();
Double MalbCrea = row.getCell(13).getNumericCellValue();
double teacherid = row.getCell(14).getNumericCellValue();
EaxmDTO eaxm = new EaxmDTO();
eaxm.setExamtime(timeFormat);
eaxm.setSbp(sbp);
eaxm.setDbp(dbp);
eaxm.setBmi(bmi);
eaxm.setWhr(whr);
eaxm.setBun(bun);
eaxm.setUa(ua);
eaxm.setCrea(crea);
eaxm.setTg(tg);
eaxm.setChol(chol);
eaxm.setGlu(glu);
eaxm.setHcy(hcy);
eaxm.setmAlb(mAlb);
eaxm.setmAlbCrea(MalbCrea);
eaxm.setTeacherid(teacherid);
eaxmList.add(eaxm);
}
//这其实可以在做一下 判断 是否数据库里已经存在了你要导入数据，我么得写，不想写，懒，难受
for(EaxmDTO eaxm:eaxmList){
result = eaxmMapper.insertEaxm(eaxm);
}
}
return result;
}
6.controller层如下
/**
* 导入excel
*/
@RequestMapping("/importExam")
@ResponseBody
public String importExam(@RequestParam MultipartFile[] file, HttpSession session) {
int result = 0;
try {
result= eaxmService.insertExam(file[0]);
} catch (Exception e) {
e.printStackTrace();
}
if(result > 0){
return "{\"result\":\"excel文件数据导入成功！\"}";
}else{
return "{\"result\":\"excel文件数据导入失败！\"}";
}
}
7.希望对各位有帮助，后面会更新图片上传+编辑的操作
各位大哥觉得好的给个赞
