How can I send different types of data in ajax post call

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>

Pravin regarding browser issue i wil see after some tym as of now i want this should work pls let me know if you get any idea? — user07, Dec 14 '14 at 09:46

Todd · Answer 1 · 2014-12-12T06:37:12.410

2

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;
});

edited Dec 12 '14 at 06:37

answered Dec 12 '14 at 06:14

Todd

5,314
3
28
45

Todd thanks for your reply but the thing is its kind of steps of dialog box at every step i m getting inputs from user file upload and on next step getting some text inputs now i am storing these details in json object. Now at dialog box 3 i am updating its div content with the value of json object. Now at this dialog box i have confirm button which is not part of any form its in the code of that dialog box. Pls let me know if i can do the same in any other way. u can refer my asked ques also earlier – user07 Dec 12 '14 at 06:18
Todd i understood what you are trying to say but how i will add data to jsonObject when moving from dialogs. for eg what you have given suppose foo tag is dialog1 and image is dialog2 and frroo is dialog3 which wil show the result of foo and image input what we entered and file we have uploaded in readonly format now how i will so the data at dialog3 and submit this to controller? and in controller what should be the code i mean something like this: public @ResponseBody ModelAndView insertAllStepDetails(@RequestParam CommonsMultipartFile[] fileUpload) throws Exception{ – user07 Dec 13 '14 at 08:34
pls edit the code if possible i have tried to add data to json object but if i am trying to show it in dialog3 its not showing so from dialog3 only user can confirm and submit details – user07 Dec 13 '14 at 08:37
give me your code. I don't want to try and guess why my stuff doesn't match your markup – Todd Dec 13 '14 at 09:34
could you put that in a codepen or jsfiddle? that'd make it easier – Todd Dec 13 '14 at 09:44
hey Todd you got any idea ? or any suggestions for me to make it work ? – user07 Dec 13 '14 at 10:53
Yes. I know why it's not working. Do you need the modals? Must they all be separate? – Todd Dec 13 '14 at 12:48
yes i am using a bean having all these details. and also let me know if i don't use model i mean bean class will it work ? if yes then i wil try that also – user07 Dec 14 '14 at 09:26
And Todd also let me know by any way we can do this as you have identified why its not working. – user07 Dec 14 '14 at 09:41

Pravin · Accepted Answer · 2014-12-15T01:41:18.207

1

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

edited Dec 15 '14 at 01:41

answered Dec 14 '14 at 23:01

Pravin

1,137
12
20

thanks a lot for your help issue got resolved with the help of what you have suggested. – user07 Dec 15 '14 at 08:27
And pravin if i have 5 string so is it i have append each string and then in controller i have to use requestparm of all these string can i use here model ? – user07 Dec 15 '14 at 08:29
You can use model. No need to use requestparam if you have many parameter. – Pravin Dec 15 '14 at 12:07
Yes you can use model – Pravin Dec 15 '14 at 19:43
hi pravin can you pls have a look to this question if possible http://stackoverflow.com/questions/27521713/how-to-accept-string-retrun-from-controller-in-ajax-call – user07 Dec 19 '14 at 06:03

How can I send different types of data in ajax post call

2 Answers2