使用Ajax和PHP在CodeIgniter中上傳多個圖像文件

Question

我在將多個圖像檔案上傳到伺服器端時遇到問題。如果有人能夠突出顯示程式碼的問題所在，那就太好了。

最初有 HTML 程式碼：

<label class="col-form-label"><h4>Upload Images</h4></label>
              <div id="image-preview-container">
                <!-- Preview images will be displayed here -->
              </div>
              <form id="uploadCert" enctype="multipart/form-data">
                <input type="file" id="images" name="images" multiple="multiple" accept="image/*" style="display: none;">
                <label for="images" class="btn btn-primary"> Add Image </label>
              </form>
            </div>

在 JavaScript 中定義

var selectedImages = []; //list of files in array

並捕獲每個選定的檔案

$("#images").change(function () {
  var file = this.files[0];

  if (file) {
    ...

    // Append the container to the image preview container
    $("#image-preview-container").append(imageContainer);

    ..

    // Add the selected image file to the postData.images array
    selectedImages.push(file);
    
    $(this).val("");
  }
});

提交後使用 AJAX

$('#addcart').click(function () {

        // Add other form fields to formData
        var formData = new FormData();
        ...
        formData.append("issuesBody", $("#fbody_").val());
        ...
        
        if (selectedImages.length > 0) {
            // Append each selected image to formData
            for (var i = 0; i < selectedImages.length; i++) {
                var image = selectedImages[i];
                if (image instanceof File) {
                  // If it's a File object, append it to formData
                  formData.append("images[]", image);

                }
            }
        } else {
            // If no selected images, set images[] to an empty array
            formData.append("images[]", []);
        }

        // Make the AJAX request
        event.preventDefault();
        $.ajax({
            url: "addcert",
            type: "POST",
            data: formData,
            dataType:"json",
            contentType:false,
            cache:false,
            processData: false,
            success: function(data){
                // Handle a successful response
                ...
            },
            error: function (xhr, status, error) {
                // Handle an error response
                ...
            }
        });

     });


});

在 PHP

private function addNewCert(){
        // Capture POST data
        $issuesBody = $this->input->post('issuesBody'); 
        // Not sure if this is the way to capture the posted file data
        $images = $_FILES['images']; 

        // Upload images to the server
        $uploadedFiles = $this->uploadimg($images);

        //Check if image uploads were successful
        if ($uploadedFiles === false) {
            // Handle the case where image uploads failed
            ...
            echo json_encode($output);
            return;
        } ...

最後在 uploadimg() 期間總是顯示 'undefined' 以及這裡的程式碼

private function uploadimg($images) {
        $uploadedFiles = array(); // captured uploaded file name

        // Loop through each uploaded file
        for ($i = 0; $i < count($images['name']); $i++) {
            // Generate a unique file name or use the original name
            $originalFileName = $images['name'][$i];
            $fileExtension = pathinfo($originalFileName, PATHINFO_EXTENSION);
            $file_name = uniqid() . '_' . $originalFileName;

            $config['upload_path'] = $this->uploadPath;
            $config['file_name'] = $file_name;
            $config['allowed_types'] = 'jpg|jpeg|png|gif'; 
            $config['max_size'] = 2048; 
            $config['encrypt_name'] = TRUE; 

            $this->load->library('upload', $config);

            // Perform the upload
            if ($this->upload->do_upload('images')) {
                $uploadedFiles[] = $file_name;
            } else {
                // Handle the case where an upload failed
                return false;
            }
        }

        return $uploadedFiles;
    }

Answer 1

實際上，程式碼中存在不只一個問題。首先，您應該將 $this->load->library('upload',$config) 語句從 for 迴圈中取出。您需要從清單中的每個文件建立單一文件才能上傳。如果我沒有記錯的話，Codeigniter do_upload 方法不適用於多個檔案。您可以更新您的 uploadimg 方法，如下所示：

private function uploadimg($images) {
    $uploadedFiles = array(); // captured uploaded file name

    $config = [
        'upload_path' => './testUploads/',
        'allowed_types' => 'jpg|jpeg|png|gif',
        'max_size' => 2048,
        'encrypt_name' => TRUE,
    ];
    $this->load->library('upload', $config);

    // Loop through each uploaded file
    for ($i = 0; $i < count($images['name']); $i++) {
        // Generate a unique file name or use the original name
        $originalFileName = $images['name'][$i];
        $fileExtension = pathinfo($originalFileName, PATHINFO_EXTENSION);
        $file_name = uniqid() . '_' . $originalFileName;

        $config['file_name'] = $file_name;
        $this->upload->initialize($config);

        $_FILES['singleImage']['name']     = $file_name;
        $_FILES['singleImage']['type']     = $images['type'][$i];
        $_FILES['singleImage']['tmp_name'] = $images['tmp_name'][$i];
        $_FILES['singleImage']['error']    = $images['error'][$i];
        $_FILES['singleImage']['size']     = $images['size'][$i];
        

        // Perform the upload
        if ($this->upload->do_upload('singleImage')) {
            $uploadedFiles[] = $file_name;
        } else {
            // Handle the case where an upload failed
            return false;
        }
    }

    return $uploadedFiles;
}

P.S 我明白了，您正在產生一個更易讀的檔案名稱。如果您想要尋找具有該命名結構的文件，則應將配置數組中的 encrypt_name 欄位設為 false。