How to send multiple image files from AJAX and how to access each of them in PHP

Question

There is a provision to select multiple images, where multiple images are selected under same "name" using <input> tag. I need to send these image files to server through JQUERY AJAX , And I need to access them at server side. How can i achieve this ?

HTML code

<div class="row col-md-5">
 <input type="file" name="event_files[]" id="event_files" multiple>
 <div style="color:red;"> Hold Ctrl(Control) button to select multiple images</div>
</div>

jquery code

var media_content = $('#media_content').val();
var subject = $('#subject').val();
var event_files = $("input[name='event_files[]']").map(function(){return $(this).val();}).get();
media_content = media_content + hidden_event_files;

$.ajax({
    type: "POST",
    data: {subject:subject,media_contacts: media_contacts,event_files:event_files, 
           media_content: media_content, _token: '<?php echo csrf_token() ?>'},
    url: base_url('/calendarEvents/send-event-email'),
    success: function (result) {
           $('#send_media_email').removeAttr('disabled');
           $('#send_media_email').html("Send Email");
           $('#send_media_email_modal').modal('hide');
           location.reload();
     }
});

Answer 1

Here is ajax, html and php global you can access. Hope it works for you.

   // Updated part
   jQuery.each(jQuery('#event_files')[0].files, function(i, file) {
       data.append('file-'+i, file);
   });

// Full Ajax request
$(".update").click(function(e) {
    // Stops the form from reloading
    e.preventDefault();

        $.ajax({
        url: '/calendarEvents/send-event-email',
        type: 'POST',
        contentType:false,
        processData: false,
        data: function(){
            var data = new FormData();
            jQuery.each(jQuery('#event_files')[0].files, function(i, file) {
                data.append('file-'+i, file);
            });
            data.append('subject' , subject);
            data.append('media_contacts' , media_contacts);
            data.append('media_content' , media_content);
            data.append('_token' , '<?php echo csrf_token() ?>');
            return data;
        }(),
            success: function(result) {
                //alert(result);
                $('#send_media_email').removeAttr('disabled');
                $('#send_media_email').html("Send Email");
                $('#send_media_email_modal').modal('hide');
                location.reload();
            },
        error: function(xhr, result, errorThrown){
            alert('Request failed.');
        }
        });

});