У меня много проблем с загрузкой нескольких изображений с помощью AJAX. Я пишу этот код:

HTML

<form id="upload" method="post" enctype="multipart/form-data">
    <div id="drop" class="drop-area">
        <div class="drop-area-label">
            Drop image here
        </div>
        <input type="file" name="file" id="file" multiple/>
    </div>

    <ul class="gallery-image-list" id="uploads">
    <!-- The file uploads will be shown here -->
    </ul>
</form>
<div id="listTable"></div>

JQuery / AJAX

$(document).on("change", "input[name^='file']", function(e){
    e.preventDefault();
    var This    =   this,
        display =   $("#uploads");

    // list all file data
    $.each(This.files, function(i, obj){
        // for each image run script asynchronous
        (function(i) {
            // get data from input file
            var file = This.files[i],
                name = file.name,
                size = file.size,
                type = file.type,
                lastModified        =   file.lastModified,
                lastModifiedDate    =   file.lastModifiedDate,
                webkitRelativePath  =   file.webkitRelativePath,
                slice               =   file.slice,
                i = i;

            // DEBUG
       /*
            var acc = []
            $.each(file, function(index, value) {
                acc.push(index + ": " + value);
            });
            alert(JSON.stringify(acc));
        */

            $.ajax({
                url:'/ajax/upload.php',
                contentType: "multipart/form-data",
                data:{
                        "image":
                        {
                            "name":name,
                            "size":size,
                            "type":type,
                            "lastModified":lastModified,
                            "lastModifiedDate":lastModifiedDate,
                            "webkitRelativePath":webkitRelativePath,
                            //"slice":slice,
                        }
                    },
                type: "POST",
                // Custom XMLHttpRequest
                xhr: function() {
                    var myXhr = $.ajaxSettings.xhr();
                    // Check if upload property exists
                    if(myXhr.upload)
                    {
                        // For handling the progress of the upload
                        myXhr.upload.addEventListener("progress",progressHandlingFunction, false); 
                    }
                    return myXhr;
                },
                cache: false,
                success : function(data){
                    // load ajax data
                    $("#listTable").append(data);
                }
            });
            // display progress
            function progressHandlingFunction(e){
                if(e.lengthComputable){
                    var perc = Math.round((e.loaded / e.total)*100);
                    perc = ( (perc >= 100) ? 100 : ( (perc <= 0) ? 0 : 0 ) );
                $("#progress"+i+" > div")
                    .attr({"aria-valuenow":perc})
                        .css("width", perc+"%");
                }
            }
            // display list of files
            display.append('<li>'+name+'</li><div class="progress" id="progress'+i+'">'
                    +'<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">'
                    +'</div></div>');
        })(i);
    }); 
});

Я пробовал разные версии, и мне так и не удалось отправить несколько данных через ajax. Я попробовал таким образом то, что вы видите выше, и теперь я получаю только информацию POST. Я понимаю, почему я получаю ПОЧТУ, но мне нужно отправить ФАЙЛЫ, и я не знаю, где я ошибаюсь.

Я не работаю в первый раз с ajax и часто использую его для большинства проектов, но я никогда не использовал для отправки нескольких файлов, и это беспокоит меня сейчас.

Спасибо!