Geek Answers Handbook

Upload multiple files using ajax and jquery

There is one form in my code containing 2 input elements:

text input and

input file (which will contain the image).

I add every file input at the click of a button and want to load all the images into an ajax call, but in my PHP file I get only the final image and the text input value.

My html and jquery code is as follows:

HTML code

<html>
    <body>
        <form name="ajax_image" id="ajax_image" method="post">
            <input type="text" name="project_name" id="project_name" placeholder="Project Name" /><br/><br/>
            <input type="text" name="project_duration" id="project_duration" placeholder="Project Duration" /><br/><br/>
            <div id="image_uploads">
            <input type="file" name="project_image[]" class="project_image" placeholder="Project Image" />
           <input type="button" name="add_upload" id="add_upload" value="+" />
            <br/><br/>
            </div>
            <input type="submit" name="submit"  id="submit" value="Submit" />
        </form>
    </body>
</html>

JQuery code

<script>
    $(document).ready(function () {
       var count=0;
        $("#add_upload").click(function(){ 
            var input = '<input type="file" name="project_image[]" class="project_image" placeholder="Project Image"/><br/><br/>'
                $("#image_uploads").append(input); 
                count++;
            });

        $("#ajax_image").submit(function (event) {                  
            event.preventDefault();          
            var data = new FormData();    


                   for(var j=0 ; j<= count ; j++)
            {
               // alert(j);
            $.each($(".project_image")[j].files, function (i, file)
            {          
                data.append(i, file);
            });
            }            
            $.each($('#ajax_image').serializeArray(), function (i, obj) {
                data.append(obj.name, obj.value)
            });

            $.ajax({
                url: "http://localhost/hetal/multi_image_php_ajax.php",
                type: "POST",
                data: data,
                processData: false,
                contentType: false,
                success: function () {
                    alert('Form Submitted!');
                },
                error: function () {
                    alert("error in ajax form submission");
                }
            });
        });
    });

</script>

Php file

<?php
print_r($_POST);

print_r($_FILES);
?>
+4
source share
3 answers

After the document is ready, add the variable:

var fileCounter = 0;

Pass it to the first parameter of the append method, then increment it.

$.each($(".project_image")[j].files, function (i, file)
{          
     data.append(fileCounter, file);
     fileCounter++;
});

, POST. , ajax POST Firebug. - , :

Content-Disposition: form-data; name="0";

EDIT: , a j append :

for(var j=0 ; j<= count ; j++)
{
    $.each($(".project_image")[j].files, function (i, file)
    { 
         data.append(j, file);
     });
}

2

, multiple . , .

HTML:

<form name="ajax_image" id="ajax_image" method="post" enctype="multipart/form-data">
        <input type="text" name="project_name" id="project_name" placeholder="Project Name" /><br/><br/>
        <input type="text" name="project_duration" id="project_duration" placeholder="Project Duration" /><br/><br/>
        <input type="file" name="project_images" class="project_images" placeholder="Project Image" multiple /><br/><br/>
        <input type="submit" name="submit"  id="submit" value="Submit" />
    </form>

JS:

$(document).ready(function () {
    $("#ajax_image").submit(function (event) {
        var data = new FormData();

        event.preventDefault();

        $.each($(".project_images")[0].files, function (key, file){
            data.append(key, file);
        });  

        $.each($('#ajax_image').serializeArray(), function (i, obj) {
            data.append(obj.name, obj.value)
        });

        $.ajax({
            url: "upload.php",
            type: "POST",
            data: data,
            processData: false,
            contentType: false,
            success: function () {
                alert('Form Submitted!');
            },
            error: function () {
                alert("error in ajax form submission");
            }
         });
    });
});
0

JS:

 for(var j=0 ; j<= count ; j++) {
        // alert(j);
        $.each($(".project_image")[j].files, function (i, file)
        {          
            data.append(i, file);
        });
 }

, 3 (count == 3). $.each . project_image[j] FormData i. j project_image[j], i 0.

data :

  • j = 0, data: {0: [some binary of first image]}
  • j = 1, data: {0: [some binary of second image]}
  • j = 2, data: {0: [some binary of third image]}

, 0 .

, :

  • , $.each . - .
  • , .. . , i, 0 j, , .
+2

Instead of creating code. I recommend you use jQuery plugins

how

uploadify

Uploadifive

Download jquery file

for security reasons, you won’t be able to download the file directly using jquery ajax. therefore, it is better to use a plugin with many options and more features.

  • this will help you upload multiple files with bootloader and progress bar and preview
0
source

More articles:


All Articles