php – 使用ajax和jquery上传多个文件

发布时间：2020-12-13 16:57:00 所属栏目：PHP教程来源：网络整理

导读：在我的代码中有一个包含2个输入元素的表单：文字输入和文件输入(包含图像). 我在按钮点击时附加每个文件输入并希望在ajax调用中上传所有图像, 但在我的PHP文件中,我只获得了文本输入的最终图像和值. 我的html和jquery代码如下： HTML代码 html body form

在我的代码中有一个包含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(),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);
?>

解决方法

文档准备好后添加一个变量：

var fileCounter = 0;

将它传递给append方法的第一个参数,然后递增.

$.each($(".project_image")[j].files,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,file)
    { 
         data.append(j,file);
     });
}

编辑2

它也可以通过使用文件输入的多个属性来完成.那么添加其他输入就不是必需的,而只需要发送一次.

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(),obj) {
            data.append(obj.name,obj.value)
        });

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!