插件引入
<link href="/js/plugins/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<script src="/js/plugins/bootstrap-fileinput/js/fileinput.js"></script>
<script src="/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
html页面
<div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">EXCEL导入</h4>
</div>
<div class="modal-body">
<div style="text-align:right;padding:5px">
<a id="excelModul" href="">
<img alt="用户信息-模板" src="" />
<span style="font-size:larger;font-weight:200;color:red">用户信息-模板.xls</span>
</a>
</div>
<hr/>
<form id="ffImport" method="post">
<div title="Excel导入操作" style="padding: 5px">
<input type="hidden" id="AttachGUID" name="AttachGUID" />
<input id="excelFile" name="file" type="file">
</div>
</form>
<hr/>
<div id="response">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
js
function InitExcelFile(service) {
$("#excelFile").fileinput({
uploadUrl: "/FileUpload/upload",//上传的地址
uploadAsync: true, //异步上传
language: "zh", //设置语言
showCaption: true, //是否显示标题
showUpload: true, //是否显示上传按钮
showRemove: true, //是否显示移除按钮
showPreview : true, //是否显示预览按钮
browseClass: "btn btn-primary", //按钮样式
uploadLabel: "上传", //设置上传按钮的汉字
enctype: 'multipart/form-data',
dropZoneEnabled: true, //是否显示拖拽区域
allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
maxFileCount: 1, //最大上传文件数限制
previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
allowedPreviewTypes: null,
previewFileIconSettings: {
'xls': '<i class="glyphicon glyphicon-file"></i>',
'xlsx': '<i class="glyphicon glyphicon-file"></i>'
},
uploadExtraData: {
service: service
}
}).on("fileuploaded", function(event, data) {
var response=data.response;
var html;
if (response.code =='501') {
html = "<div style='float:left;'><p style='text-align:left'>内容: " + response.desp + "<a href='/../../exportFile/"+ response.exportFnm + "'target='_blank'>详情下载。</a></p></div>"
}else{
html = "<div style='float:left;'><p style='text-align:left'>内容: " + response.desp + "></p></div>"
}
$(html).appendTo($('#response'));
}).on('fileerror', function(event, data, msg) { //一个文件上传失败
alert('文件上传失败!'+msg);
});
}
java后台
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public JSONObject uploadFile(@RequestParam(value = "file", required = false) MultipartFile file,String service) throws Exception {
//TODO dosomething
JSONObject result=new JSONObject();
String filetype=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
result= userService.uploadUser(file.getBytes(),filetype,service);
return result;
}
效果