CodeIgniter で画像とファイルをアップロードする方法 (例付き)
フィオナ・ブラウン
CodeIgniter ファイルのアップロード
ファイル管理は、ほとんどの Web アプリケーションにとって不可欠です。 コンテンツ管理システムを開発している場合は、画像、Word ドキュメント、PDF レポートなどをアップロードできる必要があります。会員制サイトで作業している場合は、ユーザーがプロフィールをアップロードできるようにする必要がある場合があります。画像。 CodeIgniter の File Uploading クラスを使用すると、上記のすべてを簡単に行うことができます。
このチュートリアルでは、ファイル アップロード ライブラリを使用してファイルをロードする方法を見ていきます。
CodeIgniter での画像のアップロード
ファイルのアップロード中 CodeIgniter には XNUMX つの主要な部分があります。 フロントエンドとバックエンド。 フロントエンドは、フォーム入力タイプのファイルを使用する HTML フォームによって処理されます。 バックエンドでは、ファイル アップロード ライブラリがフォームから送信された入力を処理し、アップロード ディレクトリに書き込みます。
まずは入力フォームから始めましょう。
application/views ディレクトリに files という名前の新しいディレクトリを作成します
application/views/filesに以下のファイルを追加します。
- Upload_form.php – このビューには、ファイルの入力タイプを持ち、選択したファイルを処理のためにサーバーに送信する HTML フォームが含まれています
- Upload_result.php – このビューには、クリックして結果を表示できるリンクを含む、アップロードされた画像の結果が表示されます。
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>
ここに、
- if (isset($error)){…} は、エラー変数が設定されているかどうかを確認します。結果が true の場合、アップロード ライブラリによって返されたエラーがユーザーに表示されます。
- タイプ ファイルを使用すると、ユーザーはブラウザで自分のコンピュータにアクセスし、アップロードするファイルを選択できます。
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>
ここに、
- は、アンカー ヘルパーを使用して、images ディレクトリに新しくアップロードされたファイルへのリンクを作成します。 名前は、ファイルが正常にアップロードされたときにビューに渡される画像メタデータから取得されます。
次に、画像のアップロードに応答するコントローラーを作成しましょう。
application/controllers に新しいファイル ImageUploadController.php を追加します
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);
}
}
}
ここに、
- class ImageUploadController extends CI_Controller {…} コントローラー クラスを定義し、ベース コントローラー CI_Controller を拡張します
- public function __construct() {…} 親コンストラクター メソッドを初期化し、URL とフォーム ヘルパーを読み込みます
- public functionindex() {…} 画像アップロードフォームの表示に使用されるインデックスメソッドを定義します
- public function store() {…} は、画像をアップロードして Web アプリケーション サーバーに保存するメソッドを定義します。
- $config['upload_path'] = './images/'; 画像をアップロードするディレクトリを設定します
- $config['allowed_types'] = 'gif|jpg|png'; 許容されるファイル拡張子を定義します。 これはセキュリティ上の理由から重要です。 許可されるタイプにより、画像のみがアップロードされ、php などの他のファイル タイプはサーバーを侵害する可能性があるためアップロードできなくなります。
- $config['max_size'] = 2000; 最大ファイル サイズをキロバイト単位で設定します。 この例では、アップロードできる最大ファイルは 2,000MB に近い 2kb です。 ユーザーが 2,000 kb を超えるファイルをアップロードしようとすると、画像のアップロードは失敗し、ライブラリはエラー メッセージを返します。
- $config['max_width'] = 1500; 画像の最大幅を設定します。この場合は 1,500 ピクセルです。 それより大きい幅はエラーになります
- $config['max_height'] = 1500; 許容可能な最大の高さを定義します。
- $this->load->library('upload', $config); アップロード ライブラリをロードし、上で定義した配列 $config で初期化します。
- if (!$this->upload->do_upload('profile_image')) {…} は、送信された画像のアップロードを試みます。この場合、profile_image という名前が付けられます。
- $error = array('error' => $this->upload->display_errors()); アップロードが失敗した場合のエラーメッセージを設定します
- $this->load->view('files/upload_form', $error); ファイル アップロード フォームをロードし、アップロード ライブラリから返されたエラー メッセージを表示します。
- $data = array('image_metadata' => $this->upload->data()); アップロードが成功した場合は画像メタデータを設定します
- $this->load->view('files/upload_result', $data); アップロードされたビューを正常にロードし、アップロードされたファイルのメタデータを渡します。
コントローラーについては以上です。 画像をアップロードするディレクトリを作成しましょう。 アプリケーションのルート ディレクトリに新しいディレクトリ「images」を作成します。
最後に、フォームを表示して結果を表示する XNUMX つのルートを Routes.php ファイルに追加します。
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
ここに、
- $route['アップロードイメージ'] = 'イメージアップロードコントローラー'; ImageUploadControllerのindexメソッドを呼び出すURLアップロードイメージを定義します
- $route['ストアイメージ'] = 'イメージアップロードコントローラー/ストア'; 選択したユーザー ファイルを受け入れてサーバーにアップロードする URL ストアイメージを定義します。
アプリケーションのテスト
組み込みの PHP サーバーを起動しましょう
ターミナル/コマンド ラインを開き、アプリケーションのルートを参照します。 私の場合、ルートはドライブ C:\Sites\ci-app にあります。
cd C:\Sites\ci-app
次のコマンドを使用してサーバーを起動します
php -S localhost:3000
Web ブラウザに次の URL を読み込みます。 http://localhost:3000/upload-image
以下の結果が表示されます
ファイルの選択をクリックします
次のようなダイアログウィンドウが表示されるはずです。
希望の画像を選択し、「開く」をクリックします
上の画像に示すように、選択したファイル名がフォームのアップロードに表示されます。 画像のアップロードボタンをクリックします
すべてがうまくいけば、次の結果が得られます。
「私の画像を表示」をクリックしてください。 リンク
アップロードした画像が表示されるはずです。結果は次のようになります。
アップロードされた画像の名前がURLに表示されることに注意してください。画像名はアップロードされた画像のメタデータから取得しました。
注: ファイルのアップロード プロセスは、他の種類のファイルでも同じです。
