过了三天才想要写博客，这样不好，要改正
在做毕设的时候，用户发帖涉及到了文件上传的问题，在这里记录一下
背景：
在用户发帖的时候，用户只想发表文字postText，还有些用户想在发表postText的同时还发表一些图片，如何做？
上代码
不写的太细了，和流水账似的，挑重点记录一下。
1.前台的文件上传
本来想用form表单直接上传了，但是form提交时会刷新整个页面，但这不是我想要的，所以使用了ajax提交form表单。
利用ajax提交表单需要用到jquery.form.js这个包，网上有很多这个包的介绍
先看一下form表单的部分，很简单，只是单纯地记录一下。
1 <form id="sendform" action="" method="post" >
2 <div class="row">
3 <div class="col-xs-2 post-label">
4 子主题名称：
5 </div>
6 <div class="col-xs-10">
7 <input type="text" name="menuName" id="menuName" value="${menu.menuName }" />
8 </div>
9 </div>
10 <div class="row">
11 <div class="col-xs-2 post-label">
12 帖子标题：
13 </div>
14 <div class="col-xs-10">
15 <input type="text" name="postName" id="postName" placeholder="帖子的标题" value="" />
16 </div>
17 </div>
18 <div class="row">
19 <div class="col-xs-2 post-label">
20 帖子内容：
21 </div>
22 <div class="col-xs-10">
23 <textarea rows="10" name="postText" class="post-area" id="content" placeholder="请输入帖子内容"></textarea>
24 </div>
25 </div>
26 <div class="row">
27 <div class="col-xs-2 post-label">
28 选择图片：
29 </div>
30 <div class="col-xs-10" >
31 <input type="file" name="file" id="fileRdc" />
32 </div>
33 </div>
34 <div class="row">
35 <div class="col-xs-2">
36 </div>
37 <div class="col-xs-10">
38 <button type="button" class="btn btn-primary" id="tijiaoPost" >提交</a>
39 <button type="button" class="btn btn-default" id="resetSendPost">清空</button>
40 </div>
41 </div>
42 </form>重点来了，重点，重点，重点（重要的事情说三遍！）
ajax提交带文件上传的form表单
1 <script src="assets/js/jquery-1.10.2.min.js"></script>
2 <script src="assets/js/jquery.form.js"></script>
3 <script type="text/javascript">
4 $(function(){
5 //点击提交按钮是将form通过AJAX提交
6 $("#tijiaoPost").click(function(){
7 //alert( $("#sendform").ajaxSubmit);
8 //判断文件部分是否有文件
9 alert('$("#fileRdc").val()---->'+$("#fileRdc").val())
10 alert($("#fileRdc").val()=='');
11 if($("#fileRdc").val()==null || $("#fileRdc").val() == ''){
12 //这里是ajax要将form表单提交的方法，一个只传postText另一个带了文件上传
13 ajaxFile("${pageContext.request.contextPath}/sendPostText.do");
14 }else{
15 ajaxFile("${pageContext.request.contextPath}/sendPostFile.do");
16 }
17 })
18 });
19 function ajaxFile(url){
20 $("#sendform").ajaxSubmit({
21 url: url,
22 type: "post",
23 enctype:'multipart/form-data',
24 success: function(data) {
25 alert('成功! ');
26 page(1);
27 }
28 });
29 }
30 </script>2.后台部分利用两个controller方法接收ajax提交的form
1 @RequestMapping("/sendPostFile")
2 public String sendPostFile(HttpSession session,HttpServletRequest req,String menuName,String postName,String postText,@RequestParam(value="file",required = false) MultipartFile file) throws IllegalStateException, IOException{
3 //获取userId和userName
4 User user = (User)session.getAttribute("userSession");
5 int userId = user.getUserId();
6 String userName = user.getUserName();
7 //传入表单中的menuName查出对应的menuId
8 Menu menu = sendPostService.selectMenuId(menuName);
9 int menuId = menu.getMenuId();
10 //调用sendPostService的sendPost方法将帖子信息存入到数据库中
11 int postId = sendPostService.sendPost(postName, menuId, userId, userName, postText);
12
13 if(file != null ){
14 //文件上传部分
15 //照片名字
16 String picFileName = StringUtils.newUUID();
17 //上传地址
18 String path =req.getRealPath("/assets/images/fileupload");
19 File picFile = new File(path,picFileName);
20 //先新建一个空白文件
21 picFile.createNewFile();
22 //保存文件
23 file.transferTo(picFile);
24 sendPostService.insertPicture(picFileName, userId, userName, postId);
25 }
26 return TIEZI;
27 }
28 @RequestMapping("/sendPostText")
29 public String sendPostText(HttpSession session,HttpServletRequest req,String menuName,String postName,String postText) throws IllegalStateException, IOException{
30 return sendPostFile(session, req, menuName, postName, postText, null);
31 }利用ajax提交带文件上传的form表单就这些了。
好好学习，天天向上！
来源：oschina
链接：https://my.oschina.net/u/4391345/blog/4313895