bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

整合前的准备步骤

1.搭建好基础框架，本文用的是SSM(Spring+SpringMVC+Mybatis)，这里的过程就不在本文中讲了，之前我做个一个demo(ssm整合+用户模块)，可以参考这个搭建好。

2.下载bootstrap fileinput组件源码：

https://github.com/kartik-v/bootstrap-fileinput/

搭建后的效果图

图1.

图2.

图3.

图4.

图5.

在需要编写的jsp页面引入组件

本工程的路径界面如下：

在jsp引入组件需要的js,css，如下代码:

href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css" rel="external nofollow" >

href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css" rel="external nofollow" >

引入组件，这里以我自己写的网站为例：

action="<%=basePath%>addArticle" enctype="multipart/form-data">

&http://lt;div class="form-group">

菜谱名称

placeholder="菜谱名称">

菜谱封面

class="col-sm-10 myfile" value="" />

name="url2" value="">

还有需要配置组件的详细js，我这里是放在了标签结束的后面：

以上省略

.........

配置tomcat的虚拟路径

如题,本次图片上传是要上传到服务器上别的磁盘位置，比如我的电脑作为服务器来说，一般情况下用tomcat上传图片只能上传到项目的某文件夹中，所以这里我们需要配置tomcat来打开tomcat的虚拟路径，让tomcat可以映射到本地磁盘的路径上。操作如下图：

1.双击这里

2.点击我画圈的地方

3.配置tomcat的虚拟路径

path:也就是我们tomcat的虚拟访问路径，Documnet Base是我们实际本地磁盘需要被映射的路径。

SpringMVC的Controller层编写

@Controller

@RequestMapping("/food")

public class PictureController {

// uploadFile

@RequestMapping("/uploadFile")

@ResponseBody

public Map 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 = new HashMap();

map.put("error", "图片不合法");

return map;

}

}

}

写完后直接访问Controller层配置的路径，即可成功，最终效果如前面的效果图一样。

以上所述是给大家介绍的bootstrap fileinput组件整合Springmvc上传图片到本地磁盘，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。