使用ajax和php无法上传多个文件

Question

我正在尝试使用jQuery和PHP上传多个文件。但是我的表单数据没有按照要求提交到PHP页面。请问有人可以帮我编写正确的上传文件方式吗？

以下是我的代码：

index.php:

<form id="step17Form" action="" name="step17Form" method="post" enctype="multipart/form-data">
    <div style="text-align :left; margin-left:15px"> <label><big>
                (<span style="color: red; font-family: Comic Sans MS;"><small style="font-weight: bold;">Note: Max File Size - 75KB</small></span>)</big></label>
        <br><br>
        <table style="text-align: centre; width: 800px; margin-left:15px" border="0" id="upload" cellpadding="6" cellspacing="6">
            <tbody>
                <tr>
                    <td><br><label for="stuphoto"><span style="font-family: Comic Sans MS;">1. Student Photo</label></span>
                    </td>
                    <td><br><input id="file-upload" name="stuphoto" type="file" accept=".JPG" class="custom-file-upload" style="display: inline;"></td>
                </tr>

                <tr>
                    <td><br><label for="stuadhar"><span style="font-family: Comic Sans MS;">2. Aadhar Card</label></span>
                    </td>
                    <td><br><input name="stuadhar" accept=".jpg,.pdf" class="custom-file-upload" type="file" style="display: inline;"></td>
                </tr>                                  
            </tbody>
        </table>
    </div>
    <br>
    <input type="hidden" name="reason" value="step17" />
    <button type="submit" id="upload_save" class="btn btn-success"> Save And Next >></button>
</form>

JS：

$('#upload_save').click(function(){
            event.preventDefault();        

            $.ajax({
                url: 'controller.php',
                type: 'post',
                dataType: 'json',
                data: new FormData($(this).parents('form')),
                processData: false,
                contentType: false,
                success: function(suc){
                    alert(suc['msg']);
                },
                error: function(error){
                    alert(error);
                }
            });   
    });

controller.php:

     $reason = $_POST['reason'];
        var_dump($_FILES);
if ($reason === "step17" ) {
        var_dump($_FILES);
        $status=array();
        $uploaded_file=array();
        $document_type=array("Photo","Aadhar");
        $i=0;
        $j=0;
       foreach($_FILES as $key=>$file)
       {

          $status= uploadImage($key, $file_size=5000000, "../..".FILE_PATH_LOC );
          if($status['error']!==200 && $status['status']===false )
          {
            echo json_encode(array('status'=>'false','msg'=>"Error  ".$file['name']." ".$status['msg']));  
              break;
          }
       }
    }

var_dump($_FILES)的输出结果为： array(0){ } 我面临的问题是，我发布的数据在controller.php中无法被识别，控制器无法进入if条件语句。

- Yash Parekh

---

你遇到了什么确切的问题？请考虑查看 如何提问 以提高获得答案的机会。 - suvartheec

请考虑将此信息和您可能收到的确切错误消息添加到问题中，以便对能够帮助您的人可见。 - suvartheec

尝试移除 dataType: 'json'。 - Ahmed Sunny

@suvartheec 问题已编辑。 - Yash Parekh

在Chrome中，即使不将事件作为参数传递，它也可以正常工作...我怀疑它会进行常规的回发。根据刷新页面所需的时间长短，它可能还会并行运行ajax代码。这不是一个理想的情况。您需要preventDefault（）正常工作。您可以做的另一件事是将<button type =“submit”更改为<button type =“button”，这意味着按钮的默认行为不是回发。 - ADyson

Answer 1

您需要将stuphoto变成一个数组。请尝试更改这行代码。

 <td><br><input id="file-upload" name="stuphoto" type="file" accept=".JPG" class="custom-file-upload" style="display: inline;"></td>

到

<td><br><input id="file-upload" name="stuphoto[]" type="file" accept=".JPG" class="custom-file-upload" style="display: inline;"></td>

和

foreach($_FILES as $key=>$file)

to

foreach($_FILES['stuphoto']['name'] as $key=>$file)

- Sehdev

---

我在表单中有一个名为 reason 的隐藏输入，其值为 step17。控制器代码中第三行的 if 条件语句未被执行。 - Yash Parekh

你尝试过使用 data: new FormData($(this).parents('form')[0]); 而不是 data: new FormData($(this).parents('form')) 吗？ - Sehdev

Answer 2

您的问题是，您正在将一个jQuery对象作为参数传递给FormData构造函数，但它需要一个HTML表单。

$('#upload_save').click(function(event){
        event.preventDefault();        

        $.ajax({
            url: 'controller.php',
            type: 'post',
            dataType: 'json',
            data: new FormData(this.form), // pass the form itself to the constructor
            processData: false,
            contentType: false,
            success: function(suc){
                alert(suc['msg']);
            },
            error: function(error){
                alert(error);
            }
        });   
});

- Musa