我如何在Ajax发布呼叫中发送不同类型的数据

Question

我有一个json对象，并且在相同的javascript中，我有两个文件上传对象来上传文件。 当我尝试执行此请求时，不会发送到控制器。 我已经尝试过了

data: {"jsonString":jsonString, "fd":"fd", "fd1":"fd1"},

任何人都知道以其他方式将其实现为json对象和文件对象吗？ 我只得到较早上传的文件名，但是现在在这篇文章中，我想将其保存在特定的文件夹中。

编辑：这不是在表单提交中，我正在通过此json对象值更新div内容，因此，提交按钮不在div或jsp窗体的对话框按钮中，因此我从其调用一个Java脚本，并且我有json值以及要获取的所有文件对象都想发送给控制器。

请参考我已经问过的同样的问题， 我试图进行ajax post调用，但请求不会发送给控制器

我的控制器逻辑不确定我刚刚尝试过写什么

  @RequestMapping(value = "/submitAllInfo", method = RequestMethod.POST)
@ResponseStatus(value = HttpStatus.OK)
public @ResponseBody ModelAndView insertAllStepDetails(@RequestParam CommonsMultipartFile[] fileUpload,@RequestParam CommonsMultipartFile[] Uploadfile1,@RequestParam("UserName") String UserName) throws Exception{
    System.out.println("in submit controller !!!");
    System.out.println("ffffff"+UserName);

    return new ModelAndView("success");

}

编辑：：：

我的js函数的所有div都采用一种形式：

<script type="text/javascript">
 function submitFormNew(){

alert("in final submission form");
 var UserName=$('#uname').val();
 alert(UserName);


var fileInput=document.getElementById("Uploadfile"); 
alert(fileInput);

var file=fileInput.files[0];
alert(file);
var formdata = new FormData();
formdata.append("fileUpload",file);

 var fileInput1=document.getElementById("Uploadfile1"); 

var file1=fileInput1.files[0];

formdata.append("Uploadfile1",file1); 

formdata.append("UserName",UserName);

$.ajax({
    url:contextPath +"/submitAllInfo",
    type: 'POST',
    data: formdata,
    async: false,
    success: function (data) {
        alert("in success");
       alert(data);
    },
      error: function (){
        alert("error has cocured");
     },
     cache: false

     });
     }
   </script>

Answer 1

用你的形式尝试这样的事情：

看到我在说什么？ 只需将表单吐到对话框中，从对话框移出时将数据添加到jsonObject中。 最后，您可以显示此内容，然后允许用户提交。

<form id="data" method="post" enctype="multipart/form-data">
    <div class='dialog'>
       <input type="text" name="foo" value="bar" />
    </div>
    <div class='dialog'>
       <input name="image" type="file" />
    </div>
    <div class='dialog'>
        <input name="frroo" type="file" />
        <button>Submit</button>
    </div>
</form>

$("form#data").submit(function(){
    var formData = new FormData($(this)[0]);
    colsole.log(formdata);
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

Answer 2

        <input type="file"  name="file1" id="file1"/>
        <input type="file"  name="file2" id="file2"/>



      <script type="text/javascript">

        var formdataAJX = new FormData();
        var fileUpload1 = $('#file1').val();
        if(fileUpload1 != undefined && fileUpload1 != null){

            formdataAJX.append("file1",fileUpload);
        }

        var fileUpload2 = $('#file2').val();
        if(fileUpload2 != undefined && fileUpload2 != null){

            formdataAJX.append("file2",fileUpload);
        }

        $.ajax({
        url:contextPath +"/submitAllInfo",
        type: 'POST',
        data: formdataAJX,
        async: false,
        success: function (data) {
           alert(data);
        },
        cache: false

        });

        </script>

并在Controller中将file1获取为file1和file2然后可以在formData对象中附加其他参数，在我的示例中为formdataAJX

并且您应该使用formdata.append()方法添加表单参数，例如input ， select ， file等。