画像とファイルをアップロードする方法 Codeイグナイター（例付き）

⚡ スマートサマリー

CodeIgniterのファイルアップロード機能は、組み込みのアップロードライブラリを使用して、HTMLフォームからサーバーディレクトリに画像やドキュメントを転送します。この例では、アップロードフォーム、ファイルの種類とサイズを検証するコントローラー、およびアップロード完了を確認する結果ページを作成します。

📁 コアクラス： Uploadライブラリは、送信されたファイルの検証と、指定されたアップロードディレクトリへの書き込みといったバックエンド処理を行います。
飲料衣<XNUMXxXNUMX><XNUMXxBC><XNUMXxBC> 2つの部分: ファイルのアップロードには、入力タイプが「file」のフロントエンドHTMLフォームと、送信されたデータを処理するバックエンドコントローラーが必要です。
🔒 タイプホワイトリスト: allowed_types設定では、gif、jpg、pngなどの指定された拡張子のみが許可され、PHPスクリプトなどの危険なファイルはブロックされます。
☃ サイズ制限: max_size、max_width、max_heightの各キーは、制限を超えるファイルを拒否し、明確なエラーメッセージを返します。
📝 フォームエンコーディング: フォームはenctypeをmultipart/form-dataに設定する必要があります。そうしないと、選択されたファイルはサーバーに到達しません。
📄 結果メタデータ: アップロードが成功すると、upload->data() は新しく保存された画像へのリンクを作成するために使用されるファイルの詳細を返します。
🤖 AIアシスト： AIツールは、アップロードフォーム、コントローラーの検証ルール、エラー処理を生成し、セキュリティ上の欠陥がないかレビューすることができる。

プロフィール

CodeIgniterファイルアップロード

ファイル管理はほとんどの Web アプリケーションに不可欠です。ping コンテンツ管理システムを使用する場合は、画像、Word文書、PDFレポートなどをアップロードできる必要があります。会員制サイトを運営している場合は、ユーザーがプロフィール画像をアップロードできるようにする必要があるかもしれません。 CodeIgniterのファイルアップロードクラスを使えば、上記すべてを簡単に実行できます。

このチュートリアルでは、ファイルアップロードライブラリを使用してファイルをロードする方法を見ていきます。

画像をアップロードする Codeイグナイター

ファイルのアップロード中 Codeイグナイターシステムは主にフロントエンドとバックエンドの2つの部分から構成されています。フロントエンドは、入力タイプがファイルである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(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>

ここに、

if (isset($error)){…} は、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>

ここに、

アンカーヘルパーを使用して、画像ディレクトリに新しくアップロードされたファイルへのリンクを作成します。ファイル名は、ファイルが正常にアップロードされたときにビューに渡される画像メタデータから取得されます。

それでは、画像アップロードに応答するコントローラーを作成しましょう。

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などの他のファイルタイプはアップロードされないことが保証されます。PHPなどのファイルタイプは、サーバーを侵害する可能性があるためです。
- $config['max_size'] = 2000; は、最大ファイルサイズをキロバイト単位で設定します。この例では、アップロードできる最大ファイルサイズは2,000KB（約2MB）です。ユーザーが2,000KBを超えるファイルをアップロードしようとすると、画像のアップロードは失敗し、ライブラリはエラーメッセージを返します。
- $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」という名前の新しいディレクトリを作成してください。

最後に、フォームを表示するルートと結果を表示するルートの2つをroutes.phpファイルに追加します。

application/config/routes.phpを開き、以下のルートを追加します。

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

ここに、

$route['upload-image'] = 'imageuploadcontroller'; は、 URL ImageUploadControllerのindexメソッドを呼び出すupload-image
$route['store-image'] = 'imageuploadcontroller/store'; は、 URL 選択されたユーザーファイルを受け取り、サーバーにアップロードするstore-image。

一般的な修正方法 CodeIgniterのファイルアップロードエラー

ほとんどのアップロード失敗時には、アップロードライブラリから明確なエラーメッセージが返されます。以下に、よくあるエラーとその解決策を一覧で示します。

アップロードしようとしているファイル形式は許可されていません。 不足している拡張子を allowed_types 設定に追加してください。例えば、「gif|jpg|png|pdf」のように追加します。
アップロードしようとしているファイルは、許可されているサイズを超えています。 max_sizeの値を増やし、php.iniのupload_max_filesizeとpost_max_sizeが十分な大きさであることを確認してください。
アップロードパスが有効ではないようです。 upload_pathディレクトリを作成し、Webサーバーがそのディレクトリへの書き込み権限を持っていることを確認してください。
アップロードするファイルを選択しませんでした。 入力名が do_upload() の引数と一致していること、およびフォームが enctype multipart/form-data を使用していることを確認してください。

アプリケーションのテスト

組み込みのPHPサーバーを起動しましょう。

ターミナルまたはコマンドプロンプトを開き、アプリケーションのルートディレクトリに移動します。私の場合は、ルートディレクトリはドライブ C:\Sites\ci-app にあります。

cd C:\Sites\ci-app

以下のコマンドを使用してサーバーを起動します。

php -S localhost:3000

以下を読み込んでください URL ウェブブラウザで： http://localhost:3000/upload-image

以下のような結果が表示されます。

ファイルの選択をクリックします

次のようなダイアログウィンドウが表示されるはずです。

目的の画像を選択し、「開く」をクリックしてください。

選択したファイル名は、上の画像のようにアップロードフォームに表示されます。「画像をアップロード」ボタンをクリックしてください。

全てが順調に進んだ場合、以下の結果が得られます。

「画像を表示！」リンクをクリックしてください。

アップロードした画像が表示されるはずです。表示結果は以下のようになります。

アップロードされた画像名が表示されていることに注意してください。 URL画像名は、アップロードされた画像のメタデータから取得しました。

注：その他の種類のファイルについても、ファイルのアップロード手順は同じです。

よくあるご質問

その CodeIgniter 3 のアップロードライブラリは、do_upload() の呼び出しごとに 1 つのファイルを処理するため、$_FILES をループして各アイテムに対して呼び出します。 CodeIgniter 4 は、getFileMultiple() メソッドを介して複数のファイルを直接アップロードすることをサポートしています。

いいえ。 CodeIgniter 4 では、Upload ライブラリが Request ファイル API に置き換えられました。個別のアップロードライブラリを読み込む代わりに、$this->request->getFile('field') を呼び出し、検証した後、move() を使用してファイルを保存します。

各ファイルにランダムな名前を付けるには、$config['encrypt_name']をTRUEに設定するか、$config['file_name']に任意の値を設定します。これにより、元のファイル名が同じ既存ファイルの上書きを防ぐことができます。

はい。AIは、許可されたタイプのホワイトリスト、サイズ制限、エラー処理を生成し、実際のMIMEタイプの検証などの追加チェックを提案できます。生成されたルールは、展開前に必ず実際のファイルでテストしてください。

はい。エラーメッセージとコントローラーを貼り付けていただければ、AIがマルチパートフォームの欠落、書き込み不可のupload_path、allowed_typesに拡張子が欠落しているなどの問題を特定し、修正案を提示します。

画像とファイルをアップロードする方法 Codeイグナイター（例付き）

CodeIgniterファイルアップロード

画像をアップロードする Codeイグナイター

一般的な修正方法 CodeIgniterのファイルアップロードエラー

アプリケーションのテスト

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する

CodeIgniterファイルアップロード

画像をアップロードする Codeイグナイター

関連記事

一般的な修正方法 CodeIgniterのファイルアップロードエラー

アプリケーションのテスト

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する