Reputation: 537

How do I upload multiple images using ajax in php

I am having UI like this:

I want to upload multiple videos using ajax in php. For that I tried FormData() in jQuery. But it's uploading only one image, not more than that.

My Form file :

<form enctype="multipart/form-data" action="/test.php" 
method="post" class="putImages">
   <input name="media[]" type="file" multiple/>
   <input class="button" type="submit" alt="Upload" value="Upload" />
    <button type="button" id="add"></button>
</form>

My jQuery file:

<script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
            var $div = $('div[id^="inputdiv"]:last');
            var num = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
            var $klon = $div.clone().prop('id', 'inputdiv' + num).appendTo("#athleteRegister").insertBefore("#submitbutton");
            $('#inputdiv' + num).find("input").attr('name', 'file[' + num + ']');
            $('#inputdiv' + num).find("input").val("");
            $('#inputdiv' + num).find("input").attr('id', 'file' + num);
            $('#inputdiv' + num).find("input").css("outline", "none");
            $('#inputdiv' + num).find("div.col-sm-1 i").attr('class', 'fa fa-minus');
            $('#inputdiv' + num).find("div.col-sm-1 button").attr('id', 'remove');
            $('#inputdiv' + num).find("img").attr('alt', 'remove');
        });
        $('#sub').click(function() {
            jQuery.each($('input[name^="media"]')[0].files, function(i, file) {
                data.append('file-' + i, file);
            });
            $.ajax({
                type: 'POST',
                data: data,
                url: "../admins/test",
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    alert(data);
                }
            });
        });
    });
</script>

Can anyone solve this problem? Thanks!

Upvotes: 5

Answers (3)

Tharindu Thisarasinghe

Reputation: 3998

You can achieve this easily with this plugin.

<form method="post" action="server/form_process.php">
   <!-- This area will show the uploaded files -->
   <div class="row">
      <div id="uploaded_images">
      </div>
   </div>
   <br>
   <br>
   <div id="select_file">
      <div class="form-group">
         <label>Upload Image</label>
      </div>
      <div class="form-group">
         <!-- The fileinput-button span is used to style the file input field as button -->
         <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Select file...</span>
            <!-- The file input field used as target for the file upload widget -->
            <input id="fileupload" type="file" name="files" accept="image/x-png, image/gif, image/jpeg" >
         </span>
         <br>
         <br>
         <!-- The global progress bar -->
         <div id="progress" class="progress">
            <div class="progress-bar progress-bar-success"></div>
         </div>
         <!-- The container for the uploaded files -->
         <div id="files" class="files"></div>
         <input type="text" name="uploaded_file_name" id="uploaded_file_name" hidden>
         <br>
      </div>
   </div>
   <button type="submit" class="btn btn-primary" name="submit">Submit</button>
</form>

Then add this script!

<script>
    /*jslint unparam: true */
    /*global window, $ */

    var max_uploads = 5

    $(function () {
        'use strict';

        // Change this to the location of your server-side upload handler:
        var url = 'server/upload.php';
        $('#fileupload').fileupload({
            url: url,
            dataType: 'html',
            done: function (e, data) {

                if(data['result'] == 'FAILED'){
                    alert('Invalid File');
                }else{
                    $('#uploaded_file_name').val(data['result']);
                    $('#uploaded_images').append('<div class="uploaded_image"> <input type="text" value="'+data['result']+'" name="uploaded_image_name[]" id="uploaded_image_name" hidden> <img src="server/uploads/'+data['result']+'" /> <a href="#" class="img_rmv btn btn-danger"><i class="fa fa-times-circle" style="font-size:48px;color:red"></i></a> </div>');

                    if($('.uploaded_image').length >= max_uploads){
                        $('#select_file').hide();
                    }else{
                        $('#select_file').show();
                    }
                }

                $('#progress .progress-bar').css(
                    'width',
                    0 + '%'
                );

                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });

            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });

    $( "#uploaded_images" ).on( "click", ".img_rmv", function() {
        $(this).parent().remove();
        if($('.uploaded_image').length >= max_uploads){
            $('#select_file').hide();
        }else{
            $('#select_file').show();
        }
    });
</script>

Upvotes: 0

Balasuresh Asaithambi

Reputation: 537

Finally I implemented by using https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

$.each($("input[type=file]"), function (i, obj) {
    $.each(obj.files, function (j, file) {
        ajaxData.append('file[' + i + ']', file);
    })
});

Upvotes: 1

Nick Surmanidze

Reputation: 1689

For ajax file upload I would recommend using dropzone.js. It has a fantastic documentation and flexibility is great.

Upvotes: 1

How do I upload multiple images using ajax in php

Answers (3)

Related Questions