Cách tải lên hình ảnh và tệp trong CodeIgniter (có ví dụ)
Fiona Nâu
Tải lên tệp CodeIgniter
Quản lý tập tin là điều cần thiết cho hầu hết các ứng dụng web. Nếu bạn đang phát triển một hệ thống quản lý nội dung thì 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.v. 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 điều khoản để mọi người tải lên hồ sơ của họ hình ảnh. Lớp File Uploading của CodeIgniter giúp chúng ta dễ dàng thực hiện tất cả những việc 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 hình ảnh lên CodeIgniter
Tải tập tin lên trong CodeIgniter có hai phần chính. Frontend và backend. Giao diện người dùng được xử lý bởi biểu mẫu HTML sử dụng tệp loại đầu vào biểu mẫu. Ở phần phụ trợ, thư viện tải tệp lên xử lý dữ liệu đầu vào đã gửi từ biểu mẫu và ghi nó vào thư mục tải lên.
Hãy bắt đầu với hình thức đầu vào.
Tạo một thư mục mới có tên là tập tin trong thư mục ứng dụng/lượt xem
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 – chế độ xem này hiển thị kết quả của hình ảnh được tải lên bao gồm 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('store-image')?>" 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 đặt chưa. Nếu kết quả đúng thì lỗi do thư viện tải lên trả về sẽ được hiển thị cho người dùng.
- tệp loại cho phép người dùng duyệt đến máy tính của họ và chọn tệp để tải lên.
Thêm mã sau vào 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 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 chuyển đến chế độ xem khi tệp được tải lên thành công.
Bây giờ hãy tạo bộ điều khiển sẽ phản hồi việc tải lên hình ảnh của chúng tôi
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'; xác định phần mở rộng tập tin đượ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 được 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 xâm phạm máy chủ.
- $config['max_size'] = 2000; đặt 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ể được tải lên là 2,000kb gần 2 MB. Nếu người dùng cố tải lên file lớn hơn 2,000kb thì hình ảnh sẽ không tải lên được và thư viện sẽ trả về thông báo lỗi.
- $config['max_width'] = 1500; đặt chiều rộng tối đa của hình ảnh trong trường hợp của chúng tôi là 1,500 px. Bất kỳ chiều rộng nào lớn hơn đề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 mà trong trường hợp của chúng tôi được đặt 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.
Đó là nó cho bộ điều khiển. Bây giờ hãy tạo thư mục nơi hình ảnh của chúng ta sẽ được tải lên. Tạo một thư mục mới “hình ảnh” trong thư mục gốc của ứng dụng của bạn
Cuối cùng, chúng tôi sẽ thêm hai tuyến vào tệp Routes.php để hiển thị biểu mẫu và hiển thị kết quả
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
ĐÂY,
- $route['upload-image'] = 'bộ điều khiển tải lên hình ảnh'; xác định hình ảnh tải lên URL gọi phương thức chỉ mục của ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/store'; xác định hình ảnh cửa hàng URL chấp nhận tệp người dùng đã chọn và tải nó lên máy chủ.
Kiểm tra ứng dụng
Hãy khởi động máy chủ PHP tích hợp
Mở terminal/dòng lệnh và duyệt đến thư mục gốc của ứng dụng của bạn. 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 URL sau vào trình duyệt web của bạn: http://localhost:3000/upload-image
bạn sẽ có thể thấy những 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 rồi 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ư trong hình trên. Bấm vào nút tải lên hình ảnh
Bạn sẽ nhận được kết quả sau nếu mọi thứ diễn ra tốt đẹp
Bấm vào Xem hình ảnh của tôi! liên kết
Bạn sẽ có thể thấy hình ảnh bạn đã tải lên. Kết quả sẽ tương tự như sau
Thông báo tên hình ảnh đã tải lên được hiển thị trong URL. Chúng tôi lấy tên hình ảnh từ siêu dữ liệu hình ảnh được tải lên
Lưu ý: Quá trình Upload File vẫn giữ nguyên đối với các loại file khác
