使用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