如何修复多文件上载：使用Ajax和Php为foreach（）提供的参数无效

我在获取后端（PHP）中的所有文件时遇到问题，在我的var_转储中只显示一个图像，但我上载了多个图像，唯一的目标是在用户上载多个项目时将图像上载到数据库中，因此现在没有发现错误。我想和你们分享我已经制作的示例代码

在我的Html上：

<div class="container-fluid">
        <div class="jumbotron" style="background-color:white">
            <div class="container-fluid">
                <div class="container">

                    <form id="news_media_button" action="./Function/mediaAddFunction.php" enctype="multipart/form-data"  method="post">
                        <div class="row">
                            <div class="col-md-10">
                                <h2>News Media</h2>
                            </div>
                            <div class="col-md-2">
                                <input type="submit" class="btn btn-primary form-control" id="custom_button" name="">
                            </div>z
                        </div>
                        <br><br>
                        <div class="row">
                            <div class="col-md-6">
                                <label style="font-weight: 500; font-size:14px;">File Upload</label>
                                <div class="custom-file">   
                                    <input type="file" name="files[]" multiple="multiple" placeholder="Title" id="media_file" class="custom-file-input form-control">
                                    <label class="custom-file-label" for="inputGroupFile04"></label>
                                </div>
                            </div>
                            <!-- <div class="col-md-6">
                                <label style="font-weight: 500; font-size:14px;">File Link</label>
                                <input type="text" name="" placeholder="Link" id="media_link"  value="" class="form-control">
                            </div> -->
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

$(document).ready(function(){
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

const email = localStorage.getItem('email');
$('#hidden_auth_user').val(email);

    var storeFile =[];
    const data = new FormData();

    $('#media_file').on('change',function(e){
        var files = e.target.files;
        $.each(files, function(i, file) {
           // storeFile.push(file);
            data.append('files',file);

        })
    })

    $('#news_media_button').submit(function(event){      

        event.preventDefault();
        const media_pages = $('#media_pages').val();
        const media_title = $('#media_title').val();
        //const media_content = $('#media_content').val();
        //const ck_editor_content =  CKEDITOR.instances['media_content'].getData();
        const media_link = $('#media_link').val();
        const media_file = $('#media_file').prop('files')[0];
        const hidden_auth_user = $('#hidden_auth_user').val();

        // const data = new FormData();
        data.append('media_pages',media_pages);
        data.append('media_title',media_title);
        //data.append('media_content',ck_editor_content);
        data.append('media_link',media_link);
        // data.append('files',storeFile[0]);
        data.append('hidden_auth_user',hidden_auth_user);

        Swal.fire({
            title: 'Are you sure to save this data?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#008B74',
            confirmButtonText: 'Okay'
            }).then((result) => {
        if (result.value) {

                $.ajax({
                    url:'./Function/mediaAddFunction.php',
                    data:data,
                    type:'POST',
                    processData: false,
                    contentType: false,
                    success:function(response){
                        console.log(response);
                    },
                    error:function(response) {
                        console.log(response);
                    }
               });

            }
        })

    });
});

<?php 
    require_once('../ConnectionString/require_db.php');
    session_start();

    if(isset($_FILES)) {

        $files = $_FILES['files'];


        $data =[];
        foreach($files as $index=>$file_info) 
        {
            foreach($file_info as $inner_index=>$datas) {
                $data = $datas;
                var_dump($data);
            }



        }

        // foreach($data as $file) {
        //     $filename = $file['name'];
        //     echo $filename;
        // }


    }

?>

我的后端侧：

<div class="container-fluid">
        <div class="jumbotron" style="background-color:white">
            <div class="container-fluid">
                <div class="container">

                    <form id="news_media_button" action="./Function/mediaAddFunction.php" enctype="multipart/form-data"  method="post">
                        <div class="row">
                            <div class="col-md-10">
                                <h2>News Media</h2>
                            </div>
                            <div class="col-md-2">
                                <input type="submit" class="btn btn-primary form-control" id="custom_button" name="">
                            </div>z
                        </div>
                        <br><br>
                        <div class="row">
                            <div class="col-md-6">
                                <label style="font-weight: 500; font-size:14px;">File Upload</label>
                                <div class="custom-file">   
                                    <input type="file" name="files[]" multiple="multiple" placeholder="Title" id="media_file" class="custom-file-input form-control">
                                    <label class="custom-file-label" for="inputGroupFile04"></label>
                                </div>
                            </div>
                            <!-- <div class="col-md-6">
                                <label style="font-weight: 500; font-size:14px;">File Link</label>
                                <input type="text" name="" placeholder="Link" id="media_link"  value="" class="form-control">
                            </div> -->
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

$(document).ready(function(){
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

const email = localStorage.getItem('email');
$('#hidden_auth_user').val(email);

    var storeFile =[];
    const data = new FormData();

    $('#media_file').on('change',function(e){
        var files = e.target.files;
        $.each(files, function(i, file) {
           // storeFile.push(file);
            data.append('files',file);

        })
    })

    $('#news_media_button').submit(function(event){      

        event.preventDefault();
        const media_pages = $('#media_pages').val();
        const media_title = $('#media_title').val();
        //const media_content = $('#media_content').val();
        //const ck_editor_content =  CKEDITOR.instances['media_content'].getData();
        const media_link = $('#media_link').val();
        const media_file = $('#media_file').prop('files')[0];
        const hidden_auth_user = $('#hidden_auth_user').val();

        // const data = new FormData();
        data.append('media_pages',media_pages);
        data.append('media_title',media_title);
        //data.append('media_content',ck_editor_content);
        data.append('media_link',media_link);
        // data.append('files',storeFile[0]);
        data.append('hidden_auth_user',hidden_auth_user);

        Swal.fire({
            title: 'Are you sure to save this data?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#008B74',
            confirmButtonText: 'Okay'
            }).then((result) => {
        if (result.value) {

                $.ajax({
                    url:'./Function/mediaAddFunction.php',
                    data:data,
                    type:'POST',
                    processData: false,
                    contentType: false,
                    success:function(response){
                        console.log(response);
                    },
                    error:function(response) {
                        console.log(response);
                    }
               });

            }
        })

    });
});

<?php 
    require_once('../ConnectionString/require_db.php');
    session_start();

    if(isset($_FILES)) {

        $files = $_FILES['files'];


        $data =[];
        foreach($files as $index=>$file_info) 
        {
            foreach($file_info as $inner_index=>$datas) {
                $data = $datas;
                var_dump($data);
            }



        }

        // foreach($data as $file) {
        //     $filename = $file['name'];
        //     echo $filename;
        // }


    }

?>

输出：

<div class="container-fluid">
        <div class="jumbotron" style="background-color:white">
            <div class="container-fluid">
                <div class="container">

                    <form id="news_media_button" action="./Function/mediaAddFunction.php" enctype="multipart/form-data"  method="post">
                        <div class="row">
                            <div class="col-md-10">
                                <h2>News Media</h2>
                            </div>
                            <div class="col-md-2">
                                <input type="submit" class="btn btn-primary form-control" id="custom_button" name="">
                            </div>z
                        </div>
                        <br><br>
                        <div class="row">
                            <div class="col-md-6">
                                <label style="font-weight: 500; font-size:14px;">File Upload</label>
                                <div class="custom-file">   
                                    <input type="file" name="files[]" multiple="multiple" placeholder="Title" id="media_file" class="custom-file-input form-control">
                                    <label class="custom-file-label" for="inputGroupFile04"></label>
                                </div>
                            </div>
                            <!-- <div class="col-md-6">
                                <label style="font-weight: 500; font-size:14px;">File Link</label>
                                <input type="text" name="" placeholder="Link" id="media_link"  value="" class="form-control">
                            </div> -->
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

$(document).ready(function(){
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

const email = localStorage.getItem('email');
$('#hidden_auth_user').val(email);

    var storeFile =[];
    const data = new FormData();

    $('#media_file').on('change',function(e){
        var files = e.target.files;
        $.each(files, function(i, file) {
           // storeFile.push(file);
            data.append('files',file);

        })
    })

    $('#news_media_button').submit(function(event){      

        event.preventDefault();
        const media_pages = $('#media_pages').val();
        const media_title = $('#media_title').val();
        //const media_content = $('#media_content').val();
        //const ck_editor_content =  CKEDITOR.instances['media_content'].getData();
        const media_link = $('#media_link').val();
        const media_file = $('#media_file').prop('files')[0];
        const hidden_auth_user = $('#hidden_auth_user').val();

        // const data = new FormData();
        data.append('media_pages',media_pages);
        data.append('media_title',media_title);
        //data.append('media_content',ck_editor_content);
        data.append('media_link',media_link);
        // data.append('files',storeFile[0]);
        data.append('hidden_auth_user',hidden_auth_user);

        Swal.fire({
            title: 'Are you sure to save this data?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#008B74',
            confirmButtonText: 'Okay'
            }).then((result) => {
        if (result.value) {

                $.ajax({
                    url:'./Function/mediaAddFunction.php',
                    data:data,
                    type:'POST',
                    processData: false,
                    contentType: false,
                    success:function(response){
                        console.log(response);
                    },
                    error:function(response) {
                        console.log(response);
                    }
               });

            }
        })

    });
});

<?php 
    require_once('../ConnectionString/require_db.php');
    session_start();

    if(isset($_FILES)) {

        $files = $_FILES['files'];


        $data =[];
        foreach($files as $index=>$file_info) 
        {
            foreach($file_info as $inner_index=>$datas) {
                $data = $datas;
                var_dump($data);
            }



        }

        // foreach($data as $file) {
        //     $filename = $file['name'];
        //     echo $filename;
        // }


    }

?>

---

问题在于JS代码中，您的输入名称在html

文件[]

中是正确的，但只有在

FormData

中重新分配时才是

文件

，因此应该是：

data.append('files[]', file);

而不是：

data.append('files', file);

在后端代码中，应该使用

for

循环，而不是

foreach

，如下所示：

<?php 
if(isset($_FILES['files'])) {

    $files = $_FILES['files'];


    $data = [];
    for($i=0;$i<count($files['name']);$i++) 
    {
        $file = [
         'name' => $files['name'][$i],
         'type' => $files['type'][$i],
         'size' => $files['size'][$i],
         // ....
        ];

        $data[] = $file;

    }

    var_dump($data);


}

---

你尝试过var\u dump$file\u info吗？@HamedGhasempour yah它会显示结果，但var\u dump上只会显示一个图像。我一定会尝试。如何调用数据。name？@DevGe类似于
$data[0]['name']
或
$data[1]['name']
，这取决于你想要的索引。然后像
foreach（$data as$file）一样循环它，{var\u dump（$file['name']）
还是什么