使用Spring/Ajax/JQuery在提交按钮中获取多部分和非多部分表单输入参数

我在这上面花了很多时间，但一直没能弄明白。 我有一个带有文本输入参数和图像文件上传字段的jsp页面。如何将所有这些表单参数以及文本和文件发送到控制器。我可以发送文本参数或文件，但不能同时发送两者。帮帮忙

JSP文件

<form name ="newSectionSubmitForm" id="newSectionSubmitForm"  class="form-horizontal" role="form" method="post" ENCTYPE="multipart/form-data">

  <td>
     <input type="text" name='imageName0'  class="form-control"/>
  </td>


 <td>
    <input type="file" id='imageFile0' name='imageFile0' class="form-control" />
 </td>

  <button onclick="submitNewSection('submitNewSection.html' ,'newwSectionSubmitForm');return false;">Submit Section</button>

</form>

 @RequestMapping(value = "/submitNewSection.html")
public String submitNewSection(MultipartHttpServletRequest req, HttpServletRequest request, Model model) {

Iterator<String> itr =  req.getFileNames();
MultipartFile mpf = req.getFile(itr.next());
multipartFile.add(mpf);

// code working fine so far

String imageName= req.getParameter("imageName0")); //giving null instead of value

//also tried
String imageName= request.getParameter("imageName0")); //still null instead of value

}

}

控制器文件

<form name ="newSectionSubmitForm" id="newSectionSubmitForm"  class="form-horizontal" role="form" method="post" ENCTYPE="multipart/form-data">

  <td>
     <input type="text" name='imageName0'  class="form-control"/>
  </td>


 <td>
    <input type="file" id='imageFile0' name='imageFile0' class="form-control" />
 </td>

  <button onclick="submitNewSection('submitNewSection.html' ,'newwSectionSubmitForm');return false;">Submit Section</button>

</form>

 @RequestMapping(value = "/submitNewSection.html")
public String submitNewSection(MultipartHttpServletRequest req, HttpServletRequest request, Model model) {

Iterator<String> itr =  req.getFileNames();
MultipartFile mpf = req.getFile(itr.next());
multipartFile.add(mpf);

// code working fine so far

String imageName= req.getParameter("imageName0")); //giving null instead of value

//also tried
String imageName= request.getParameter("imageName0")); //still null instead of value

}

@RequestMapping（value=“/submitNewSection.html”）
公共字符串submitNewSection（MultipartHttpServletRequest请求、HttpServletRequest请求、模型）{
迭代器itr=req.getFileName（）；
MultipartFile mpf=req.getFile（itr.next（））；
multipartFile.add（mpf）；
//代码目前运行良好
字符串imageName=req.getParameter（“imageName0”）；//将值改为null
//也试过
字符串imageName=request.getParameter（“imageName0”）；//仍然为null而不是value
}

My spring xml具有以下bean信息：

<bean id="multipartResolver"                                                 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="1000000000" /> 

</bean>

---

如何在控制器中同时获取表单参数和文件输入。非常感谢您的帮助。谢谢。

您可以使用formdata进行文件上传，但这只适用于支持html5的浏览器

var form = $('form')[0]; 
var formData = new FormData(form);
$.ajax({
    url: 'submitNewSection.html',
    data: data,
    type: 'POST',
    success: function ( data ) {
        alert( data );
    }
});

---

如果你想让它甚至适用于较旧的浏览器，你可以使用iframe和form进行文件上传。

我想最好的方法是使用ajaxForm，它适用于所有浏览器。所以在你的情况下

$("#newSectionSubmitForm").ajaxForm({
        beforeSend: function () {
            var percentVal = '0%';

        },
        resetForm: true,
        uploadProgress: function (event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
        },
        beforeSerialize: function ($Form, options) {

            return true;
        },
        success: function (data, status, xhr, $form) {

        //do whatever

        }
});

而在服务器端，则以伙伴的身份执行

@RequestMapping(value = "/submitNewSection.html", method = {RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public String submitNewSection(@RequestParam("imageFile0") MultipartFile file,
            HttpServletRequest request, HttpServletResponse response,
            HttpSession session) throws IOException {



  //You can get other parameters like 

   String yourParameter = request.getParameter("imageName0");

   //And play with your Multipart object like

    if (null != file && !file.isEmpty()) {
       //Do whatever

     }


}

更新

---

这就是我所做的。如图所示，它在我的JS文件中，但似乎不起作用。我有Chrome35，它支持html5，但我似乎没有把文件输入和文本输入放在一起。我可以得到它们中的任何一个，但不能两者都得到。非常感谢您提供的代码片段。它工作得非常好！：）不确定FormData方式为什么不起作用，但AjaxForm运行良好。抱歉，由于声誉不足，无法投票，但非常感谢您的帮助。是否可以通过这种方式获取文件数组。假设我要传递imageFile0、imageFile1、imageFile2，这是否可以通过RequestParam获得？这些值0,1,2位于表行中。谢谢，是的！查看我的更新答案。如果您知道文件的数量，那么您可以这样做…如果不知道，那么您可以在html中为所有文件元素使用相同的名称，并可以使用RequestParam在文件数组中获取该数组。对于任何正在寻找类似解决方案的人。基本上，如果您需要文件输入数组，您可以通过这种方式获得它-multipartttpServletRequest multipartRequest=（multipartttpServletRequest）request；MultipartFile file=multipartRequest.getFile（文件名）；