Cách tải ảnh và tập tin lên CodeBộ đánh lửa (kèm ví dụ)

⚡ Tóm tắt thông minh

CodeIgniter File Upload sử dụng thư viện Upload tích hợp sẵn để chuyển hình ảnh và tài liệu từ biểu mẫu HTML lên thư mục trên máy chủ. Ví dụ này xây dựng một biểu mẫu tải lên, một bộ điều khiển xác thực loại và kích thước, và một trang kết quả xác nhận việc tải lên thành công.

📁 Lớp học cốt lõi: Thư viện Upload đảm nhiệm công việc xử lý phía máy chủ, bao gồm việc xác thực tệp được gửi và ghi tệp đó vào thư mục tải lên đã chọn.
🖼️ Gồm hai phần: Quá trình tải lên cần một biểu mẫu HTML ở phía giao diện người dùng với trường nhập liệu kiểu "file" cộng với một bộ điều khiển ở phía máy chủ để xử lý dữ liệu gửi đi.
🔒 Nhập danh sách trắng: Cấu hình allowed_types chỉ chấp nhận các phần mở rộng được liệt kê như gif, jpg và png, chặn các tệp có rủi ro như tập lệnh PHP.
📏 Giới hạn kích thước: Các khóa max_size, max_width và max_height sẽ từ chối các tệp vượt quá giới hạn và trả về thông báo lỗi rõ ràng.
📝 Mã hóa biểu mẫu: Biểu mẫu phải đặt enctype thành multipart/form-data, nếu không tệp đã chọn sẽ không bao giờ đến được máy chủ.
📄 Siêu dữ liệu kết quả: Khi thành công, upload->data() sẽ trả về thông tin chi tiết về tệp được sử dụng để tạo liên kết đến hình ảnh vừa được lưu trữ.
🤖 Hỗ trợ AI: Các công cụ AI có thể tạo ra biểu mẫu tải lên, các quy tắc xác thực bộ điều khiển và xử lý lỗi, sau đó xem xét chúng để tìm ra các lỗ hổng bảo mật.

Đọc thêm

CodeTải lên tệp Igniter

Quản lý tập tin là yếu tố thiết yếu đối với hầu hết các ứng dụng web. Nếu bạn là nhà phát triển...ping Nếu bạn đang sử dụng hệ thống quản lý nội dung, bạn sẽ cần có khả năng tải lên hình ảnh, tài liệu Word, báo cáo PDF và nhiều hơn nữa. Nếu bạn đang làm việc trên một trang web thành viên, bạn có thể cần cung cấp chức năng cho phép người dùng tải lên ảnh hồ sơ của họ. CodeLớp Igniter File Uploading giúp chúng ta dễ dàng thực hiện tất cả những điều trên.

Trong hướng dẫn này, chúng ta sẽ xem xét cách sử dụng thư viện tải lên tệp để tải tệp.

Tải ảnh lên CodeIgnite

Tải tập tin lên trong CodeIgnite Hệ thống gồm hai phần chính: giao diện người dùng (frontend) và phần xử lý dữ liệu (backend). Giao diện người dùng được xử lý bởi biểu mẫu HTML sử dụng kiểu nhập liệu là `file`. Ở phần xử lý dữ liệu, thư viện tải lên tệp sẽ xử lý dữ liệu được nhập từ biểu mẫu và ghi vào thư mục `upload`.

Chúng ta hãy bắt đầu với biểu mẫu nhập liệu.

Tạo một thư mục mới có tên là files trong thư mục application/views.

Thêm các tập tin sau vào application/views/files

upload_form.php – chế độ xem này chứa biểu mẫu HTML có loại tệp đầu vào và gửi tệp đã chọn đến máy chủ để xử lý
upload_result.php – trang này hiển thị kết quả của hình ảnh đã tải lên, bao gồm cả một liên kết mà chúng ta có thể nhấp vào để xem kết quả.

Thêm mã sau vào upload_form.php

<!DOCTYPE html>
<html>
<head>
<title>CodeIgniter Image Upload</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Select an image from your computer and upload it to the cloud</h3>
<?php
if (isset($error)){
echo $error;
}
?>
<form method="post" action="<?=base_url(0)?>" enctype="multipart/form-data">
<input type="file" id="profile_image" name="profile_image" size="33" />
<input type="submit" value="Upload Image" />
</form>
</div>
</body>
</html>

ĐÂY,

if (isset($error)){…} kiểm tra xem biến lỗi đã được thiết lập hay chưa. Nếu kết quả là true, thì lỗi do thư viện tải lên trả về sẽ được hiển thị cho người dùng.
Loại tệp này cho phép người dùng duyệt đến máy tính của họ và chọn một tệp để tải lên.

Thêm đoạn mã sau vào tệp upload_result.php

<!DOCTYPE html>
<html>
<head>
<title>Image Upload Results</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Congratulations, the image has successfully been uploaded</h3>
<p>Click here to view the image you just uploaded
<?=anchor('images/'.$image_metadata['file_name'], 'View My Image!')?>
</p>
 
<p>
<?php echo anchor('upload-image', 'Go back to Image Upload'); ?>
</p>
</div>
</body>
</html>

ĐÂY,

Sử dụng trình trợ giúp neo để tạo liên kết đến tệp mới được tải lên trong thư mục hình ảnh. Tên được lấy từ siêu dữ liệu hình ảnh được truyền đến chế độ xem khi tệp đã được tải lên thành công.

Bây giờ chúng ta hãy tạo bộ điều khiển sẽ phản hồi việc tải ảnh lên.

Thêm tệp mới ImageUploadController.php trong ứng dụng/bộ điều khiển

Thêm mã sau vào ImageUploadController.php

<?php
 
defined('BASEPATH') OR exit('No direct script access allowed');
 
class ImageUploadController extends CI_Controller {
 
public function __construct() {
parent::__construct();
$this->load->helper('url', 'form');
}
 
public function index() {
$this->load->view('files/upload_form');
}
 
public function store() {
$config['upload_path'] = './images/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 2000;
$config['max_width'] = 1500;
$config['max_height'] = 1500;
 
$this->load->library('upload', $config);
 
if (!$this->upload->do_upload('profile_image')) {
$error = array('error' => $this->upload->display_errors());
 
$this->load->view('files/upload_form', $error);
} else {
$data = array('image_metadata' => $this->upload->data());
 
$this->load->view('files/upload_result', $data);
}
}
 
}

ĐÂY,

lớp ImageUploadController mở rộng CI_Controller {…} xác định lớp trình điều khiển của chúng tôi và mở rộng trình điều khiển cơ sở CI_Controller
public function __construct() {…} khởi tạo phương thức khởi tạo gốc và tải các trình trợ giúp url và biểu mẫu
public function index() {…} xác định phương thức chỉ mục được sử dụng để hiển thị biểu mẫu tải lên hình ảnh
public function store() {…} xác định phương thức sẽ tải hình ảnh lên và lưu trữ nó trên máy chủ ứng dụng web.
- $config['upload_path'] = './images/'; đặt thư mục nơi hình ảnh sẽ được tải lên
- `$config['allowed_types'] = 'gif|jpg|png';` định nghĩa các phần mở rộng tệp được chấp nhận. Điều này rất quan trọng vì lý do bảo mật. Các loại tệp được cho phép đảm bảo rằng chỉ có hình ảnh được tải lên và các loại tệp khác như PHP không thể được tải lên, vì chúng có khả năng gây nguy hiểm cho máy chủ.
- `$config['max_size'] = 2000;` thiết lập kích thước tệp tối đa tính bằng kilobyte. Trong ví dụ của chúng tôi, tệp tối đa có thể tải lên là 2,000kb, gần 2MB. Nếu người dùng cố gắng tải lên tệp lớn hơn 2,000kb, thì hình ảnh sẽ không được tải lên và thư viện sẽ trả về thông báo lỗi.
- `$config['max_width'] = 1500;` thiết lập chiều rộng tối đa của hình ảnh, trong trường hợp này là 1,500 px. Bất kỳ chiều rộng nào lớn hơn mức đó đều dẫn đến lỗi.
- $config['max_height'] = 1500; xác định chiều cao tối đa có thể chấp nhận được.
- $this->load->library('upload', $config); tải thư viện tải lên và khởi tạo nó bằng mảng $config mà chúng tôi đã xác định ở trên.
- if (!$this->upload->do_upload('profile_image')) {…} cố gắng tải lên hình ảnh đã gửi, trong trường hợp này hình ảnh có tên là profile_image
- $error = array('error' => $this->upload->display_errors()); đặt thông báo lỗi nếu tải lên không thành công
- $this->load->view('files/upload_form', $error); tải biểu mẫu tải lên tệp và hiển thị thông báo lỗi được trả về từ thư viện tải lên
- $data = array('image_metadata' => $this->upload->data()); đặt siêu dữ liệu hình ảnh nếu tải lên thành công
- $this->load->view('files/upload_result', $data); tải chế độ xem đã tải lên thành công và chuyển siêu dữ liệu của tệp đã tải lên.

Vậy là xong phần thiết lập bộ điều khiển. Bây giờ chúng ta hãy tạo thư mục để tải ảnh lên. Tạo một thư mục mới có tên “images” trong thư mục gốc của ứng dụng.

Cuối cùng, chúng ta sẽ thêm hai tuyến đường vào tệp routes.php để hiển thị biểu mẫu và hiển thị kết quả.

Mở tệp application/config/routes.php và thêm các tuyến đường sau.

$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

ĐÂY,

$route['upload-image'] = 'imageuploadcontroller'; định nghĩa URL Tải lên hình ảnh bằng cách gọi phương thức index của ImageUploadController.
$route['store-image'] = 'imageuploadcontroller/store'; định nghĩa URL Chức năng lưu trữ hình ảnh chấp nhận tệp do người dùng chọn và tải lên máy chủ.

Cách khắc phục lỗi phổ biến CodeLỗi tải tệp lên Igniter

Hầu hết các lỗi tải lên đều hiển thị thông báo rõ ràng từ thư viện Upload. Danh sách dưới đây liệt kê các lỗi thường gặp và cách khắc phục chúng.

Loại tệp bạn đang cố gắng tải lên không được phép: Thêm phần mở rộng còn thiếu vào cấu hình allowed_types, ví dụ: 'gif|jpg|png|pdf'.
Tệp bạn đang cố gắng tải lên có kích thước lớn hơn kích thước cho phép: Tăng giá trị max_size và xác nhận upload_max_filesize và post_max_size trong php.ini đã đủ lớn.
Đường dẫn tải lên có vẻ không hợp lệ: Tạo thư mục upload_path và đảm bảo máy chủ web có quyền ghi vào thư mục đó.
Bạn chưa chọn tệp để tải lên: Kiểm tra xem tên đầu vào có khớp với đối số của hàm do_upload() hay không và biểu mẫu có sử dụng enctype multipart/form-data hay không.

Kiểm tra ứng dụng

Chúng ta hãy khởi động máy chủ PHP tích hợp sẵn.

Mở cửa sổ dòng lệnh hoặc terminal và điều hướng đến thư mục gốc của ứng dụng. Trong trường hợp của tôi, thư mục gốc nằm ở ổ C:\Sites\ci-app

cd C:\Sites\ci-app

Khởi động máy chủ bằng lệnh sau:

php -S localhost:3000

Tải các mục sau URL trong trình duyệt web của bạn: http://localhost:3000/upload-image

Bạn sẽ có thể thấy các kết quả sau:

Bấm vào chọn tập tin

Bạn sẽ có thể thấy một cửa sổ hộp thoại tương tự như sau

Chọn hình ảnh bạn muốn, sau đó nhấp vào "Mở".

Tên tệp đã chọn sẽ hiển thị trong biểu mẫu tải lên như hình ảnh bên trên. Nhấp vào nút Tải lên hình ảnh.

Nếu mọi việc diễn ra suôn sẻ, bạn sẽ nhận được các kết quả sau.

Nhấp vào liên kết "Xem ảnh của tôi!"

Bạn sẽ thấy được hình ảnh mà bạn đã tải lên. Kết quả sẽ tương tự như hình dưới đây.

Hãy chú ý rằng tên ảnh đã tải lên được hiển thị trong phần mô tả. URLChúng tôi lấy tên ảnh từ siêu dữ liệu của ảnh đã tải lên.

Lưu ý: Quy trình tải lên tệp vẫn giữ nguyên đối với các loại tệp khác.

Câu Hỏi Thường Gặp

CodeThư viện Upload của Igniter 3 xử lý một tập tin cho mỗi lần gọi do_upload(), vì vậy bạn sẽ lặp qua $_FILES và gọi hàm đó cho từng mục. CodeIgniter 4 hỗ trợ tải lên nhiều tệp trực tiếp thông qua phương thức getFileMultiple().

STT CodeIgniter 4 thay thế thư viện Upload bằng API Request file. Bạn gọi `$this->request->getFile('field')`, xác thực nó, sau đó sử dụng `move()` để lưu trữ tệp, thay vì tải một thư viện upload riêng biệt.

Đặt `$config['encrypt_name'] = TRUE` để đặt tên ngẫu nhiên cho mỗi tệp, hoặc đặt `$config['file_name']` thành giá trị bạn chọn. Điều này ngăn chặn việc ghi đè lên các tệp hiện có có cùng tên gốc.

Đúng vậy. AI có thể tạo ra danh sách trắng allowed_types, giới hạn kích thước và xử lý lỗi, đồng thời đề xuất các bước kiểm tra bổ sung như xác minh loại MIME thực. Luôn kiểm tra các quy tắc được tạo ra với các tệp thực trước khi triển khai.

Vâng. Hãy dán thông báo lỗi và mã điều khiển của bạn, AI có thể xác định các vấn đề như thiếu biểu mẫu đa phần, upload_path không thể ghi hoặc thiếu phần mở rộng trong allowed_types, sau đó đề xuất cách khắc phục.

Cách tải ảnh và tập tin lên CodeBộ đánh lửa (kèm ví dụ)

CodeTải lên tệp Igniter

Tải ảnh lên CodeIgnite

Cách khắc phục lỗi phổ biến CodeLỗi tải tệp lên Igniter

Kiểm tra ứng dụng

Câu Hỏi Thường Gặp

Tóm tắt bài viết này với:

Đăng kí để nhận thư mới

CodeTải lên tệp Igniter

Tải ảnh lên CodeIgnite

NHỮNG BÀI VIẾT LIÊN QUAN

Cách khắc phục lỗi phổ biến CodeLỗi tải tệp lên Igniter

Kiểm tra ứng dụng

Câu Hỏi Thường Gặp

Tóm tắt bài viết này với:

Đăng kí để nhận thư mới