使用Kartjee Fileinput提交多文件时服务器仅接收最后一个的解决方法

Hey there, I see the issue you're facing with multiple file uploads using Kartik's FileInput component—only the last file makes it to the server when you select more than one. Let's break down what's going wrong and how to fix it quickly.

The core problem here is how your file input's name attribute is set. Right now it's name="file", which tells the server to expect a single file. When you upload multiple files with this setup, each subsequent file overwrites the previous one in the request, leaving only the last one intact.

Here's how to resolve this:

1. Update the file input's name to use array syntax #

Change your file input's name from file to file[]. This tells the server to treat the upload as an array of files, so it won't overwrite previous entries. Here's the modified HTML snippet:

<form method="post" action="<?php echo $uploadURL; ?>" enctype="multipart/form-data">
    <?php foreach ($params as $p => $v) echo " <input type=\"hidden\" name=\"{$p}\" value=\"{$v}\" />
"; ?>
    <!-- Changed name to file[] to support multiple files -->
    <input id="myInput" type="file" name="file[]" multiple>
    <input type="submit" value="Upload" class="btn-file"/>
</form>

2. Adjust your server-side code to handle the file array #

On the PHP side, you'll now access the files via the $_FILES['file'] array, which will contain all uploaded files. You'll need to loop through this array to process each file individually. For example:

if (isset($_FILES['file'])) {
    $files = $_FILES['file'];
    // Loop through each uploaded file
    for ($i = 0; $i < count($files['name']); $i++) {
        $fileName = $files['name'][$i];
        $fileTmpName = $files['tmp_name'][$i];
        $fileError = $files['error'][$i];
        
        if ($fileError === UPLOAD_ERR_OK) {
            // Process the file (move to upload directory, validate, etc.)
            move_uploaded_file($fileTmpName, '/path/to/your/uploads/folder/' . $fileName);
        }
    }
}

3. Confirm your FileInput configuration is correct #

Your current JavaScript setup already supports multiple files—you've added the multiple attribute to the input, set maxFileCount: '4', and disabled the component's built-in upload button (since you're using the form's submit button). No changes are needed here, but it's good to confirm these settings align with your multi-file upload goal.

That should do it! With the name="file[]" change, your server will receive all selected files instead of just the last one. Just make sure your server-side code handles the array of files properly, and you'll be all set for multi-file uploads.

内容的提问来源于stack exchange，提问作者Smith han