利用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表单就这些了。
好好学习，天天向上！
