Not working for multiple input file tags

[hiteshkumarGE]

Hi
for this works awesome for one input file tag file but if more than one file input tag I am not able to upload it ... if I keep the ajax function in a function and call it for each tag

it has three ajax call . Is there any work around for this to reduce it to one ajax call

Below is my code little modified :

jQuery(document).ready(function() {
var files = {};
var filesArr = [];
jQuery('input[type=file]').on('change', prepareUpload);
function prepareUpload(event)
{
var $this = jQuery(this);
if ($this.val() == '') {
Response('- Upload file not selected!', true);
$this.addClass('Error').fadeOut().fadeIn();
return false;
} else {
$this.removeClass('Error');
files = event.target.files;
if(files[0].name){
filesArr.push(files);
}
}
console.log(filesArr);
}
jQuery( "#cmdSubmit" ).on( "click", function() {
var imgVal = jQuery('#image_pe').val();

alert(imgVal);   

event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening

// START A LOADING SPINNER HERE

jQuery.each(filesArr, function(key, value)
{
ajaxForm(filesArr[key])
// console.log(filesArr[key]);

});

});
function ajaxForm(files){
// Create a formdata object and add the files
var data = new FormData();
jQuery.each(files, function(key, value)
{
data.append(key, value);

});

jQuery.ajax({
url: '/myphp.php?files',
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === 'undefined')
{
// Success so call function to process the form
submitForm(event, data);
}
else
{
// Handle errors here
console.log('ERRORS: ' + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// Handle errors here
console.log('ERRORS: ' + textStatus);
// STOP LOADING SPINNER
}
});
}
function submitForm(event, data)
{
// Create a jQuery object from the form
$form = jQuery(event.target);

    // Serialize the form data
    var formData = $form.serialize();

    // You should sterilise the file names
    jQuery.each(data.files, function(key, value)
    {
        formData = formData + '&filenames[]=' + value;
    });

    jQuery.ajax({
        url: '/myphp.php',
        type: 'POST',
        data: formData,
        cache: false,
        dataType: 'json',
        success: function(data, textStatus, jqXHR)
        {
            if(typeof data.error === 'undefined')
            {
                // Success so call function to process the form
                console.log('SUCCESS: ' + data.success);
            }
            else
            {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            // Handle errors here
            console.log('ERRORS: ' + textStatus);
        },
        complete: function()
        {
            // STOP LOADING SPINNER
        }
    });
}

});

[kilua]

im modified this script for multiple input text... maybe u can modified to...this is my script
in index.html put the script

$(document).ready(function() {


        var nomor = 0;
        var status="";
        $(".tambah").click(function(){

            nomor ++;
            $('#cih').append(
                        '<tr>'
                     + '<td><input name="nomor[]" value="'+ nomor +'" type="hidden"></td>'
                     +  '<td><label for="name">Name:</label><input name="fullname_'+ nomor +'" type="text"></td></tr>'
                );
            });


}); 

Tambah Data


Name:

    <td>
        <label for="file_upload">File:</label>
        <input type="file" name="file_upload" id="file_upload" required>
    </td>

    <td>
    <div id="cih"></div><input class="button green" type="submit" name="submit" value="Submit Content"></td>

</tr>

and the script.js

function submitForm(event, data)
{
// Create a jQuery object from the form
$form = $(event.target);

    // Serialize the form data
    var formData = $form.serialize();

    // You should sterilise the file names
    $.each(data.files, function(key, value)
    {
        formData = formData + '&filenames=' + value;
    });
    var form = $('#fas');
    $.ajax({
        url: 'submit.php',
        type: 'POST',
        data: formData,
        cache: false,
        dataType: 'json',
        success: function(data)
        {

             $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:140,
                modal: true,
                buttons: {
                "OK": function() {
                 form.trigger('reset'); 
                $(this ).dialog( "close" );
                }
                }
                });
        }
    });
}

if u want to multipe input for upload file u can change in the line script

$.ajax({
url: 'submit.php?files',
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === 'undefined')
{
// Success so call function to process the form
submitForm(event, data);
}
else
{
// Handle errors here
console.log('ERRORS: ' + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// Handle errors here
console.log('ERRORS: ' + textStatus);
// STOP LOADING SPINNER
}
});

[salvio67]

looking for the same pb solution.

[israel-viveros]

##Les dejo mi modificacion bastante sencilla

var files = [];

// Add events
$('input[type=file]').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
  files.push(event.target.files);
}






$('form').on('submit', uploadFiles);

// Catch the form submit and upload the files
function uploadFiles(event)
{
  event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening

    // START A LOADING SPINNER HERE

    // Create a formdata object and add the files
    var data = new FormData();
    $.each(files, function(key, value)
    {
        console.log(value[0]);
        data.append(key, value[0]);
    });
console.log("here")
    $.ajax({
        url: 'subir.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
        success: function(data, textStatus, jqXHR)
        {
            console.log(data);
            console.log("hey")
            if(typeof data.error === 'undefined')
            {
                // Success so call function to process the form
                console.log("termino debo enviar el form completo");
            }
            else
            {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            // Handle errors here
            console.log('ERRORS: ' + textStatus);
            // STOP LOADING SPINNER
        }
    });
}