AJAX提交form表单带文件上传

Posted 2020-09-22 燕麦酸奶

过了三天才想要写博客，这样不好，要改正

在做毕设的时候，用户发帖涉及到了文件上传的问题，在这里记录一下

背景：

在用户发帖的时候，用户只想发表文字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表单就这些了。

好好学习，天天向上！