ajax uploading multiple images not showing multiple filenames

[Gptgeoff]

I have this code I'm using to upload multiple images via ajax call. In console I can see the combined data being sent but not the multiple file names. Im not sure when sending multiple images what I should see in the network-paramaters view in console.

This is what I'm seeing in console

-----------------------------82392211927416 Content-Disposition: form-data; name="action"

 

add_photo

-----------------------------82392211927416 Content-Disposition: form-data; name="image"; filename="about-vimeo.png" Content-Type: image/png

PNG

 

 

<script>
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var checked_box = $('input:checkbox:checked').val();
    var file = _("image").files[0];
    var imageFile =$("#image").val();
//       alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append( 'action','add_photo');
    formdata.append("image", file);
    jQuery.each($("input[name^=image]")[0].files, function(i, file) {
    formdata.append('photo['+i+']', file);
    });
//  formdata.append("video", vidName);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "includes/add_photo.inc.php?checked_box="+checked_box);
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>

 

 

 

Html form

 

<div id="photos">

    <form enctype="multipart/form-data" name="add_photo"  class="add_photo">
     <?php
            while($row = mysqli_fetch_array($result4)){ ?>  

      <div class="photoAlbum_list">     

      <div id="#photoAlbumId" class="albumPhoto"><?php echo $row['album_name'];?></div>

      <img src="image/mandinga_folder.png" class="folder"/>

      <input type="checkbox" class="photoAlbumId" id="photoAlbumList" value="<?php echo $row['albumid'];?>"/>

      </div>

      <?php } ?>

    </form>

<div id="addPhotoInstruction" style="display:block">Please choose an Album to Upload Photo's to</div>

<input name="image[]" id="image" type="file" multiple style="display:none" value=""/>

<input onClick="uploadFile()" type="button" id="add_photo_but" class="add_photo_but" name="add_photo_but" value="Add Photo" form="add_photo" style="display:none"/>

<progress id="progressBar" value="0" max="100" style="display:none"></progress>

<h3 id="status" style="display:none"></h3>

<p id="loaded_n_total" style="display:none"></p>

</div>

 

 

Can anyone confirm if this is what would be seen in multiple image upload and if not correct how I can show in the formdata the different file names I expected to see