1.引入基础文件 省略bootstrape 3.x 以及最新的jquery
css文件
<!-- fileinput -->
<link rel="stylesheet" href="/bower_components/bootstrap-fileinput/css/fileinput.min.css"/>
js文件 包含ajaxForm需要的js 包括fileinput汉化
<!-- fileinput -->
<script src="/bower_components/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="/bower_components/bootstrap-fileinput/js/jquery.form.js"></script>
<script src="/bower_components/bootstrap-fileinput/js/locales/zh.js"></script>
2.form表单
注:上传文件的表单需加上enctype="multipart/form-data", input里的name属性供后台接收参数使用,accept选择显示文件时的后缀名
坑:插件汉化不成功,需在input中去掉class="file"的属性,未知原因
<form id="importFile" action="/excel/uploadFile" class="form-horizontal" method ="POST" enctype="multipart/form-data">
<div class="box-body">
<div>
<label class="control-label">请选择要导入的Excel文件:</label>
<input id="excelFile" type="file" name="fileUpload" data-preview-file-type="text" accept=".xls,.xlsx"/>
</div>
</div>
</form>
3.js文件
submit方式为表单自动提交 插件中出现的上传就是submit方式 也可修改为ajax异步方式
下面附录汉化方式和不显示预览的设置
$(function() {
$("#excelFile").fileinput({
language : 'zh',
showPreview:false
});
});
//ajaxForm 方式用来接收submit方式提交的form,data为后台返回值
/** 验证文件是否导入成功 */
$("#importFile").ajaxForm(function(data){
if(data.rspCode=="000000"){
layer.msg(data.rspMsg);
setTimeout("location.reload();",3000);
}else {
layer.msg(data.rspMsg);
}
});
4.后台实例
/**
* 上传文件
* @throws Exception
*/
@RequestMapping(value = "uploadFile", method = RequestMethod.POST)
@ResponseBody
public Response uploadFile(
@RequestParam(value="fileUpload")MultipartFile fileUpload, //此时是input中name的作用
HttpSession httpSession
) {
//获取当前用户
User user=(User) httpSession.getAttribute("user");
if(fileUpload!=null){
try {
InputStream inputStream = fileUpload.getInputStream();
readSMSService.genSMSByXls(inputStream,user);//若果不用存本地,则直接发短信。
} catch (Exception e) {
e.printStackTrace();
return new Response("999999","文件内容格式不正确,上传失败,!");
}
return new Response("000000","上传成功,正在跳转...!");
}
return new Response("000000","请添加excel文件!");
}