How to make an array of HTML FormData

Question

I have got a HTML FORM with two fields a type text and input type file Fields

This is the below code

<form id="myForm" method="post">
   First name: <input type="text" id="fname" name="fname"><br>
   Files: <input type="file" id="files" name="files" multiple><br/>
</form>
<br><br><br>
<input type="button" value="Add To Container" class="addtocontainer">
<input type="button" value="Submit Ajax call " class="callAjax">

Once User fills up this fields , and Clicks on Add To Container Button , it will be added to a Array (User can add as many as forms to the array)

And finally he clicks on Submit button to insert all the contents of array to Database through Ajax call

This is my code

var newArr=[];

$(document).on("click", ".addtocontainer", function(event) {
  var form = $('form')[0]; 
   var formData = new FormData(form);
   newArr.push(formData);
   $("#fname").val('');
    $("#files").val('');
});

$(document).on("click", ".callAjax", function(event) {
   for(var i=0;i<newArr.length;i++)
   {
   console.log(newArr[i]);
   }
});

In the callAjax event i am getting FomData empty when i am retrieving it through looping an array Could you please tell me if this is the right approach or not

This is my fiddle

http://jsfiddle.net/fx7su2rp/290/

Did you try with serializeArray() ?

Mohit Tanwani
– Mohit Tanwani

2016-09-29 10:03:11 +00:00
Commented Sep 29, 2016 at 10:03 — Mohit Tanwani
– Mohit Tanwani, Commented Sep 29, 2016 at 10:03

Shubham Khatri · Accepted Answer · 2016-09-29 10:32:13Z

2

MAke use of serializeArray instead of formData as

var formData = $(form).serializeArray();

PS: serializeArray doesn't work for file uploads as JavaScript has no access to the content of the file that is entered in that field. At most the browser might allow access to the file name. Any processing you want to do with the file will need to be done on the server after it is uploaded to the temporary workspace there.

You can do it like this

   var formData = $(form).serializeArray();
   formData.push($('input[name="files"]').val());

JSFIDDLE

edited Sep 29, 2016 at 10:32

answered Sep 29, 2016 at 10:08

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pawan Over a year ago

but why is it not showing the picture name in the form while looping through the array jsfiddle.net/fx7su2rp/294??

Shubham Khatri Over a year ago

serializeArray doesn't work for file uploads as

JavaScript has no access to the content of the file that is entered in that field. At most the browser might allow access to the file name. Any processing you want to do with the file will need to be done on the server after it is uploaded to the temporary workspace there.

Mayank Pandeyz · Accepted Answer · 2016-09-29 10:08:45Z

1

Try some thing like this this:

<script>
$(document).ready(function(){
    $('#upload').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

        form_data.append('index', value);
        form_data.append('index', value);
        // you can send multiple index => value pair as you want

        $.ajax({
                url         : 'upload.php',     // point to server-side PHP script 
                dataType    : 'text',           // what to expect back from the PHP script, if anything
                cache       : false,
                contentType : false,
                processData : false,
                data        : form_data,                         
                type        : 'post',
                success     : function(output){
                    alert(output);              // display response from the PHP script, if any
                }
         });
         $('#pic').val('');                     /* Clear the file container */
    });
});
</script>
</head>

<body>
<input id="pic" type="file" name="pic" />
<button id="upload">Upload</button>
</body>
</html>

It will work fine for me to upload image using ajax.

edited Sep 29, 2016 at 10:08

answered Sep 29, 2016 at 10:04

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

3 Comments

Pawan Over a year ago

here i need to send multiple FormData , the above code works for one Form

Pawan Over a year ago

Thanks this worked for me , but how did you manage it in back end ?? have u used java by any chnace ??

Mayank Pandeyz Over a year ago

No bro, I am using php for backend. Please accept the answer if it helps you :P

Collectives™ on Stack Overflow

How to make an array of HTML FormData

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related