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に表示されることに注意してください。画像名はアップロードされた画像のメタデータから取得しました。

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

よろしければ：

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

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

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

関連記事