Multiple file upload is not working using jQuery and Ajax and PHP

Question

I want to do multiple file upload. I tried lot but I'm not able to get the solution. Whenever I am uploading multiple images, it is taking only first image value.

formData.append('file[]', $('input[type=file]')[0].files[0]);

I am trying like this I am getting single image

formData.append('file[]', $('input[type=file]')[1].files[1]);

I am trying like this I am getting error

Uncaught TypeError: Cannot read property 'files' of undefined

$("#basicFormBtn").click(function(e){
    e.preventDefault();
    var formData = new FormData();
    var formData = new FormData($('#basicForm')[0]);
    formData.append('file[]', $('input[type=file]')[0].files[0]);
    $.ajax({
        type:'POST',
        url :"test_session.php",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            console.log(data);
        },
        error:function(exception){
            alert('Exeption:'+exception);
        }
    });
});

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Basic Form</h2>
        <form id="basicForm">
            <div class="row">
                <div class="col-md-5 form-group">
                    <label for="name">User Name:</label>
                    <input type="text" class="form-control" id="userName" placeholder="Enter userName" name="userName" required="">
                </div>
            </div>
  
            <div class="row">
                <div class="col-md-5 form-group">
                    <label for="album">Album:</label>
                    <input type="file" name="file" required="" multiple> 
                </div>
            </div>
            <input type="submit" name="submit" value="submit" class="btn btn-info" id="basicFormBtn">
        </form>
    </div>

</body>
</html>

I'm getting output like this (in test_session.php) with print_r($_FILES);

Array
(
    [file] => Array
        (
            [name] => Array
                (
                    [0] => 1.png
                )

            [type] => Array
                (
                    [0] => image/png
                )

            [tmp_name] => Array
                (
                    [0] => C:\xampp5.6\tmp\phpC3C0.tmp
                )

            [error] => Array
                (
                    [0] => 0
                )

            [size] => Array
                (
                    [0] => 166275
                )

        )

     )

You need to append each image with a loop function, like for or for each — Pedram
– Pedram, Commented Nov 26, 2017 at 10:26
You don't need to append anything if it is already in the form and all the files are already in the form object. Get rid of the files append — charlietfl
– charlietfl, Commented Nov 26, 2017 at 11:02

Prashant · Accepted Answer · 2017-11-26 10:32:54Z

2

Try this you will get all uploaded files.

Your old code

<input type="file" name="file" required="" multiple>

Change with this

<input type="file" name="file[]" required="" multiple>

answered Nov 26, 2017 at 10:32

Prashant

3471 gold badge2 silver badges12 bronze badges

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

Comments

wahmal · Accepted Answer · 2017-11-26 12:20:43Z

0

that's because you not set array value to your append file input. try this :

var i=0;//set default array value
$("#basicFormBtn").click(function(e){
i++;//set next array value
e.preventDefault();
var formData = new FormData();
var formData = new FormData($('#basicForm')[0]);
formData.append('file['+i+']', $('input[type=file]')[0].files[0]);//push next array value
$.ajax({
    type:'POST',
    url :"test_session.php",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
        console.log(data);
    },
    error:function(exception){
        alert('Exeption:'+exception);
    }
});

});

answered Nov 26, 2017 at 12:20

wahmal

97712 silver badges28 bronze badges

Collectives™ on Stack Overflow

Multiple file upload is not working using jQuery and Ajax and PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related