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

Question

I have one json object and in the same javascript i have two file upload objects to upload a file. When i am trying to do this request is not going to the controller. I have tried like this.

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

Anyone know any other way to implement this as in json object with file object? I'm getting only the file name which was uploaded earlier but now on this post I want to save this in a specific folder.

Edit: This in not on form submit I am updating a div content by this json object values and so submit button is not in the div or jsp form its button of dialog box so I am calling one java script from their and in that i have json values as well as I'm getting file objects all three I want to send to controller.

Please refer I have asked the question for the same I am trying to do a ajax post call but request is not going to controller

My Controller logic not sure what needs to write i have just tried

  @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");

}

Edit:::

my js function all the div are in one form:

<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

try something like this with your form:

see what I'm getting at? just spit the form up into dialogs, add data to jsonObject when moving from dialogs. At the end you could display this, and then allow user to submit.

<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>

and in your Controller get your file as file1 and file2 and you can append other parameter in your formData object that is formdataAJX in my example

and you should use formdata.append() method to add form parameters like input , select , file etc ...