使用Ajax、PHP和jQuery上载多个图像

Question

使用Ajax、PHP和jQuery上载多个图像

使用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":
                        {
                 
                        }
                    },

我尝试过不同的版本，但从未成功地通过Ajax发送多个数据。我试过这样做，你在上面看到的，现在我只得到张贴的信息。我明白我为什么得到帖子，但我需要发送文件信息，我不知道我错在哪里。

我并不是第一次使用Ajax，而是经常在大多数项目中使用Ajax，但是我从来没有发送过多个文件，现在这让我很困扰。

谢谢!