使用ajax和jquery上傳多個文件

Question

在我的代碼中有一個包含2個輸入元素的表單：

文字輸入和

文件輸入 （包含圖像）。

我在按鈕點擊時附加每個文件輸入，並希望在ajax調用中上傳所有圖像，但在我的PHP文件中，我只獲得文本輸入的最終圖像和值。

我的html和jquery代碼如下：

HTML代碼

<html>
    <body>
        <form name="ajax_image" id="ajax_image" method="post">
            <input type="text" name="project_name" id="project_name" placeholder="Project Name" /><br/><br/>
            <input type="text" name="project_duration" id="project_duration" placeholder="Project Duration" /><br/><br/>
            <div id="image_uploads">
            <input type="file" name="project_image[]" class="project_image" placeholder="Project Image" />
           <input type="button" name="add_upload" id="add_upload" value="+" />
            <br/><br/>
            </div>
            <input type="submit" name="submit"  id="submit" value="Submit" />
        </form>
    </body>
</html>

Jquery代碼

<script>
    $(document).ready(function () {
       var count=0;
        $("#add_upload").click(function(){ 
            var input = '<input type="file" name="project_image[]" class="project_image" placeholder="Project Image"/><br/><br/>'
                $("#image_uploads").append(input); 
                count++;
            });

        $("#ajax_image").submit(function (event) {                  
            event.preventDefault();          
            var data = new FormData();    


                   for(var j=0 ; j<= count ; j++)
            {
               // alert(j);
            $.each($(".project_image")[j].files, function (i, file)
            {          
                data.append(i, file);
            });
            }            
            $.each($('#ajax_image').serializeArray(), function (i, obj) {
                data.append(obj.name, obj.value)
            });

            $.ajax({
                url: "http://localhost/hetal/multi_image_php_ajax.php",
                type: "POST",
                data: data,
                processData: false,
                contentType: false,
                success: function () {
                    alert('Form Submitted!');
                },
                error: function () {
                    alert("error in ajax form submission");
                }
            });
        });
    });

</script>

PHP文件

<?php
print_r($_POST);

print_r($_FILES);
?>

Answer 1

問題似乎與JS的這一部分有關：

 for(var j=0 ; j<= count ; j++) {
        // alert(j);
        $.each($(".project_image")[j].files, function (i, file)
        {          
            data.append(i, file);
        });
 }

假設有3個文件（ count == 3 ）。 您正在循環$.each調用三次。 每次，您將通過文件project_image[j]並通過鍵i將其附加到FormData 。 由於每個j只有一個project_image[j] ，因此i的值始終為0 。

您最終得到的data通過這一系列事件：

在j = 0 ， data: {0: [some binary of first image]}
在j = 1 ， data: {0: [some binary of second image]}
在j = 2 ， data: {0: [some binary of third image]}

請注意，密鑰0不斷被覆蓋。

您應該編輯您的代碼，以便：

顯然，沒有必要在循環中調用$.each 。 這是你混淆的根本原因 - 你混淆了這兩個指數。
修復鍵名，即引用正確的循環索引。 簡而言之，將您的i始終為0更改為j ，這實際上是您想要的索引。

Answer 2

文檔准備好后添加一個變量：

var fileCounter = 0;

將它傳遞給append方法的第一個參數，然后遞增。

$.each($(".project_image")[j].files, function (i, file)
{          
     data.append(fileCounter, file);
     fileCounter++;
});

問題是您在POST請求中發送了兩個具有相同名稱的文件。 您可以通過打開ajax請求並單擊Firebug中的POST選項卡來查看此信息。 這兩個文件都是這樣的，所以每個下一個文件都會覆蓋前一個文件：

Content-Disposition: form-data; name="0";

編輯：它存在一個更簡單的解決方案，只需通過傳遞一個j作為追加的第一個參數，而不是雜亂：

for(var j=0 ; j<= count ; j++)
{
    $.each($(".project_image")[j].files, function (i, file)
    { 
         data.append(j, file);
     });
}

編輯2

它也可以通過使用文件輸入的multiple屬性來完成。 那么添加其他輸入就不是必需的，而只需要發送一次。

HTML：

<form name="ajax_image" id="ajax_image" method="post" enctype="multipart/form-data">
        <input type="text" name="project_name" id="project_name" placeholder="Project Name" /><br/><br/>
        <input type="text" name="project_duration" id="project_duration" placeholder="Project Duration" /><br/><br/>
        <input type="file" name="project_images" class="project_images" placeholder="Project Image" multiple /><br/><br/>
        <input type="submit" name="submit"  id="submit" value="Submit" />
    </form>

JS：

$(document).ready(function () {
    $("#ajax_image").submit(function (event) {
        var data = new FormData();

        event.preventDefault();

        $.each($(".project_images")[0].files, function (key, file){
            data.append(key, file);
        });  

        $.each($('#ajax_image').serializeArray(), function (i, obj) {
            data.append(obj.name, obj.value)
        });

        $.ajax({
            url: "upload.php",
            type: "POST",
            data: data,
            processData: false,
            contentType: false,
            success: function () {
                alert('Form Submitted!');
            },
            error: function () {
                alert("error in ajax form submission");
            }
         });
    });
});

Answer 3

而不是創建您的代碼。 我建議你使用Jquery插件

喜歡

uploadify

Uploadifive

Jquery文件上傳

出於安全原因，您無法使用jquery ajax直接上傳文件。 所以最好使用具有更多選項和更多設施的插件

它將幫助您使用加載程序和進度條上傳多個文件並進行預覽

使用ajax和jquery上傳多個文件

問題描述

3 個解決方案

解決方案1
2 2015-06-19 07:35:33

解決方案2
1 已采納 2015-06-19 07:46:08

解決方案3
0 2015-06-19 07:13:54

使用ajax和jquery上傳多個文件

問題描述

3 個解決方案

解決方案1 2 2015-06-19 07:35:33

解決方案2 1 已采納 2015-06-19 07:46:08

解決方案3 0 2015-06-19 07:13:54

解決方案1
2 2015-06-19 07:35:33

解決方案2
1 已采納 2015-06-19 07:46:08

解決方案3
0 2015-06-19 07:13:54