整合前的准备步骤
1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好。
2.下载bootstrap fileinput组件源码:
nofollow" href="https://github.com/kartik-v/bootstrap-fileinput/">https://github.com/kartik-v/bootstrap-fileinput/
搭建后的效果图
图1.

图2.

图3.

图4.

图5.

在需要编写的jsp页面引入组件
本工程的路径界面如下:

在jsp引入组件需要的js,css,如下代码:
nofollow" rel="stylesheet">
nofollow" >
引入组件,这里以我自己写的网站为例:
.........
uploadFile(MultipartFile myfile)
throws IllegalStateException,IOException {
// 原始
名称
String oldFileName = myfile.getOriginalFilename(); //
获取上传文件的原名
// System.out.println(oldFileName);
// 存储
图片的虚拟本地路径(这里需要配置tomcat的web模块路径,双击猫进行配置)
String saveFilePath = "E://picture";
//
上传图片
if (myfile != null && oldFileName != null && oldFileName.length() > 0) {
// 新的
图片名称
String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
// 新
图片
File newFile = new File(saveFilePath + "\\" + newFileName);
// 将内存中的数据写入磁盘
myfile.transferTo(newFile);
// 将新
图片名称返回到前端
Map
map = new HashMap();
map.put("success","成功啦");
map.put("url",newFileName);
return map;
} else {
Map();
map.put("error","图片不合法");
return map;
}
}
}