CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to make an array of HTML FormData

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/

Upvotes: 0

Views: 79

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281656

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

Upvotes: 2

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

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.

Upvotes: 1

Related Questions