基于CodeIgniter的Blueimp jQuery-File-Upload：上传、重命名及图片缩放问题

Hey there! Let's tackle each of your questions step by step with practical, actionable solutions tailored to Blueimp jQuery-File-Upload + CodeIgniter:

To pull this off, you'll handle the renaming logic directly in your CodeIgniter controller when processing uploads. Here's a straightforward implementation:

Step 1: Define Your Base Prefix #

First, decide where your core number (like 15) comes from—it could be a record ID (from a hidden form field), user ID, or a dynamically generated value. For example, if it's tied to a form's associated record:

$prefix = $this->input->post('record_id'); // Fetch from a hidden input in your form

Step 2: Process Multiple Files with Sequential Numbering #

Loop through each uploaded file, track the sequence, and set a custom filename in CodeIgniter's upload configuration:

// Load CodeIgniter's Upload library
$this->load->library('upload');

// Initialize sequence counter
$file_sequence = 1;

// Loop through each uploaded file
foreach ($_FILES['userfiles']['name'] as $key => $original_name) {
    // Skip if no file was uploaded for this index
    if (empty($_FILES['userfiles']['tmp_name'][$key])) continue;

    // Extract original file extension
    $file_ext = pathinfo($original_name, PATHINFO_EXTENSION);

    // Configure upload settings
    $upload_config = [
        'upload_path'   => './uploads/',
        'allowed_types' => 'jpg|jpeg|png',
        'file_name'     => "{$prefix}_{$file_sequence}.{$file_ext}", // Sequential filename
        'overwrite'     => FALSE, // Avoid overwriting existing files
    ];

    $this->upload->initialize($upload_config);

    // Process the upload
    if ($this->upload->do_upload('userfiles[' . $key . ']')) {
        // Optional: Save upload metadata to link with your database later
        $upload_records[] = $this->upload->data();
        $file_sequence++; // Increment sequence for the next file
    } else {
        // Capture upload errors for debugging/feedback
        $upload_errors[] = $this->upload->display_errors();
    }
}

This will rename each uploaded file to [prefix]_[sequence].[extension] exactly as you need.

You can split the workflow using Blueimp's event handlers and CodeIgniter's request routing. Here's how to structure it:

Frontend Setup #

• Create a main form for your text inputs, add separate buttons for "Upload Files" and "Submit Form" (disable the submit button until uploads finish).
• Use Blueimp's stop event to detect when all uploads complete, then enable the submit button and pass uploaded file references to the form:

$('#fileupload').fileupload({
    url: '/upload/handle_files', // CI controller method for file uploads
    dataType: 'json',
    stop: function (e) {
        // Enable submit button once all files are uploaded
        $('#submit-form-btn').prop('disabled', false);
        // Add hidden inputs to pass uploaded filenames to the form
        $.each(e.result.files, function (index, file) {
            $('<input>').attr({
                type: 'hidden',
                name: 'uploaded_files[]',
                value: file.name
            }).appendTo('#main-form');
        });
    }
});

Backend Setup #

1. File Upload Handler (/upload/handle_files):

   • Process uploads using the logic from question 1, return JSON with uploaded filenames/paths.
   • Optional: Save temporary upload records in a database table (tied to a session ID) to link with the upcoming form submission.

2. Form Submission Handler (/submit/save_form):

   • Retrieve form data and uploaded file references, then save everything to your database:

public function save_form() {
    // Get form input data
    $form_data = [
        'title' => $this->input->post('title'),
        'description' => $this->input->post('description'),
        // Add other form fields as needed
    ];

    // Insert form data into your main table
    $this->db->insert('your_main_table', $form_data);
    $record_id = $this->db->insert_id();

    // Link uploaded files to the new record
    $uploaded_files = $this->input->post('uploaded_files');
    foreach ($uploaded_files as $file) {
        $this->db->insert('file_associations', [
            'record_id' => $record_id,
            'file_path' => $file
        ]);
    }

    // Redirect to success page or show confirmation
    redirect('/submit/success');
}

Blueimp's plugin supports client-side image resizing with its processing extensions. Here's how to set it up:

Step 1: Include Required Plugins #

Make sure you add these JS files to your frontend (alongside the core Blueimp library):

• jquery.fileupload-process.js
• jquery.fileupload-image.js
• jquery.fileupload-resize.js

Step 2: Configure Resize Settings #

Add the resize processing step to your fileupload initialization:

$('#fileupload').fileupload({
    url: '/upload/handle_files',
    processQueue: [
        {
            action: 'resize',
            options: {
                maxWidth: 1200, // Maximum width for resized images
                maxHeight: 800, // Maximum height
                quality: 0.9, // Image quality (0 = lowest, 1 = highest)
                crop: false // Set to true if you want to crop instead of proportionally resize
            }
        }
    ],
    // Optional: Restrict to image files only
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
});

This will automatically resize images in the browser before uploading, reducing bandwidth usage and server-side processing load.

内容的提问来源于stack exchange，提问作者Reem Aziz