AJAX提交form表单带文件上传

Posted 燕麦酸奶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX提交form表单带文件上传相关的知识,希望对你有一定的参考价值。

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

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

背景:

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

好好学习,天天向上!

以上是关于AJAX提交form表单带文件上传的主要内容,如果未能解决你的问题,请参考以下文章

jquery.form.js ajax提交上传文件

工作中如何使用ajax提交form表单,包括ajax文件上传

form表单submit提交内容,跟ajax异步提交form表单的区别,

怎么用ajax 提交上传的文件上传后在界面显示出来。但界面不刷新

使用ajax提交form表单,包括ajax文件上传

ajax form表单提交 input file中的文件