CodeIgniter で画像とファイルをアップロードする方法 (例付き)

CodeIgniter ファイルのアップロード

ファイル管理は、ほとんどの Web アプリケーションにとって不可欠です。 コンテンツ管理システムを開発している場合は、画像、Word ドキュメント、PDF レポートなどをアップロードできる必要があります。会員制サイトで作業している場合は、ユーザーがプロフィールをアップロードできるようにする必要がある場合があります。画像。 CodeIgniter の File Uploading クラスを使用すると、上記のすべてを簡単に行うことができます。

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

CodeIgniter での画像のアップロード

ファイルのアップロード中 CodeIgniter には XNUMX つの主要な部分があります。 フロントエンドとバックエンド。 フロントエンドは、フォーム入力タイプのファイルを使用する HTML フォームによって処理されます。 バックエンドでは、ファイル アップロード ライブラリがフォームから送信された入力を処理し、アップロード ディレクトリに書き込みます。

まずは入力フォームから始めましょう。

application/views ディレクトリに files という名前の新しいディレクトリを作成します

以下を追加wing application/view/files 内のファイル

  • Upload_form.php – このビューには、ファイルの入力タイプを持ち、選択したファイルを処理のためにサーバーに送信する HTML フォームが含まれています
  • Upload_result.php – このビューには、クリックして結果を表示できるリンクを含む、アップロードされた画像の結果が表示されます。


以下を追加wing 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 の場合、アップロード ライブラリによって返されたエラーがユーザーに表示されます。
  • タイプ ファイルを使用すると、ユーザーはブラウザで自分のコンピュータにアクセスし、アップロードするファイルを選択できます。

続きを宣伝しますwing 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 を追加します

以下を追加wing 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

次のコマンドを使用してサーバーを起動しますwing command

php -S localhost:3000

以下をロードしますwing Web ブラウザの URL: http://localhost:3000/upload-image

あなたは次を見ることができるでしょうwing 結果

CodeIgniter での画像のアップロード

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

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

CodeIgniter での画像のアップロード

希望の画像を選択し、「開く」をクリックします

CodeIgniter での画像のアップロード

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

次の情報が得られますwing すべてがうまくいったと仮定した場合の結果

CodeIgniter での画像のアップロード

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

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

CodeIgniter での画像のアップロード

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

注: ファイルのアップロード プロセスは、他の種類のファイルでも同じです。