So laden Sie Bilder und Dateien in CodeIgniter hoch (mit Beispiel)

CodeIgniter-Datei-Upload

Die Dateiverwaltung ist für die meisten Webanwendungen unerlässlich. Wenn Sie ein Content-Management-System entwickeln, müssen Sie in der Lage sein, Bilder, Word-Dokumente, PDF-Berichte usw. hochzuladen. Wenn Sie an einer Mitgliederseite arbeiten, müssen Sie möglicherweise vorsehen, dass Personen ihr Profil hochladen können Bilder. Die Datei-Upload-Klasse von CodeIgniter macht es uns leicht, alle oben genannten Aufgaben zu erledigen.

In diesem Tutorial sehen wir uns an, wie Sie die Datei-Upload-Bibliothek zum Laden von Dateien verwenden.

Hochladen von Bildern in CodeIgniter

Hochladen der Datei in CodeIgniter besteht aus zwei Hauptteilen. Das Frontend und das Backend. Das Frontend wird vom HTML-Formular verwaltet, das die Formulareingabetypdatei verwendet. Im Backend verarbeitet die Datei-Upload-Bibliothek die übermittelten Eingaben aus dem Formular und schreibt sie in das Upload-Verzeichnis.

Beginnen wir mit dem Eingabeformular.

Erstellen Sie ein neues Verzeichnis mit dem Namen „Dateien“ im Verzeichnis „Anwendung/Ansichten“.

Fügen Sie die folgenden Dateien in application/views/files hinzu

upload_form.php – diese Ansicht enthält das HTML-Formular mit dem Eingabetyp Datei und sendet die ausgewählte Datei zur Verarbeitung an den Server
upload_result.php – diese Ansicht zeigt die Ergebnisse des hochgeladenen Bildes einschließlich eines Links an, auf den wir klicken können, um die Ergebnisse anzuzeigen.

Fügen Sie den folgenden Code zu upload_form.php hinzu

<!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>

HIER,

if (isset($error)){…} prüft, ob die Fehlervariable gesetzt wurde. Wenn das Ergebnis wahr ist, wird dem Benutzer der von der Upload-Bibliothek zurückgegebene Fehler angezeigt.
Mit der Typdatei kann der Benutzer auf seinen Computer zugreifen und eine Datei zum Hochladen auswählen.

Fügen Sie den folgenden Code zu upload_result.php hinzu

<!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>

HIER,

verwendet den Ankerhelfer, um einen Link zur neu hochgeladenen Datei im Bilderverzeichnis zu erstellen. Der Name wird aus den Bildmetadaten abgerufen, die an die Ansicht übergeben werden, wenn die Datei erfolgreich hochgeladen wurde.

Lassen Sie uns nun den Controller erstellen, der auf das Hochladen unserer Bilder reagiert

Fügen Sie eine neue Datei ImageUploadController.php in application/controllers hinzu

Fügen Sie den folgenden Code zu ImageUploadController.php hinzu

<?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);
        }
    }

}

HIER,

Die Klasse ImageUploadController erweitert CI_Controller {…} definiert unsere Controller-Klasse und erweitert den Basiscontroller CI_Controller
Die öffentliche Funktion __construct() {…} initialisiert die übergeordnete Konstruktormethode und lädt die URL- und Formularhilfsprogramme
Die öffentliche Funktion index() {…} definiert die Indexmethode, die zum Anzeigen des Bild-Upload-Formulars verwendet wird
Die öffentliche Funktion store() {…} definiert die Methode, die das Bild hochlädt und auf dem Webanwendungsserver speichert.

$config['upload_path'] = './images/'; Legt das Verzeichnis fest, in das die Bilder hochgeladen werden sollen
$config['allowed_types'] = 'gif|jpg|png'; definiert die zulässigen Dateierweiterungen. Dies ist aus Sicherheitsgründen wichtig. Die zulässigen Typen stellen sicher, dass nur Bilder hochgeladen werden und andere Dateitypen wie PHP nicht hochgeladen werden können, da sie den Server gefährden könnten.
$config['max_size'] = 2000; Legen Sie die maximale Dateigröße in Kilobyte fest. In unserem Beispiel beträgt die maximale Datei, die hochgeladen werden kann, 2,000 KB, also etwa 2 MB. Wenn der Benutzer versucht, eine Datei mit mehr als 2,000 KB hochzuladen, schlägt das Hochladen des Bildes fehl und die Bibliothek gibt eine Fehlermeldung zurück.
$config['max_width'] = 1500; Legt die maximale Breite des Bildes fest, die in unserem Fall 1,500 Pixel beträgt. Jede größere Breite führt zu einem Fehler
$config['max_height'] = 1500; definiert die maximal zulässige Höhe.
$this->load->library('upload', $config); lädt die Upload-Bibliothek und initialisiert sie mit dem Array $config, das wir oben definiert haben.
if (!$this->upload->do_upload('profile_image')) {…} versucht, das übermittelte Bild hochzuladen, das in unserem Fall „profile_image“ heißt
$error = array('error' => $this->upload->display_errors()); Legt die Fehlermeldung fest, wenn der Upload fehlschlägt
$this->load->view('files/upload_form', $error); lädt das Datei-Upload-Formular und zeigt die Fehlermeldung an, die von der Upload-Bibliothek zurückgegeben wird
$data = array('image_metadata' => $this->upload->data()); Setzt die Bildmetadaten, wenn der Upload erfolgreich war
$this->load->view('files/upload_result', $data); Lädt die erfolgreich hochgeladene Ansicht und übergibt die hochgeladenen Dateimetadaten.

Das war's für den Controller. Erstellen wir nun das Verzeichnis, in das unsere Bilder hochgeladen werden. Erstellen Sie ein neues Verzeichnis „images“ im Stammverzeichnis Ihrer Anwendung

Schließlich fügen wir unserer Datei „routes.php“ zwei Routen hinzu, die das Formular und die Ergebnisse anzeigen

Open application/config/routes.php
Add the following routes
$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

HIER,

$route['upload-image'] = 'imageuploadcontroller'; Definiert die URL upload-image, die die Indexmethode von ImageUploadController aufruft
$route['store-image'] = 'imageuploadcontroller/store'; Definiert das URL-Speicherbild, das die ausgewählte Benutzerdatei akzeptiert und auf den Server hochlädt.

Testen der Anwendung

Starten wir den integrierten PHP-Server

Öffnen Sie das Terminal/die Befehlszeile und navigieren Sie zum Stammverzeichnis Ihrer Anwendung. In meinem Fall befindet sich das Stammverzeichnis im Laufwerk C:\Sites\ci-app

cd C:\Sites\ci-app

Starten Sie den Server mit dem folgenden Befehl

php -S localhost:3000

Laden Sie die folgende URL in Ihren Webbrowser: http://localhost:3000/upload-image

Sie werden die folgenden Ergebnisse sehen können

Klicken Sie auf Datei auswählen

Sie sollten ein Dialogfenster ähnlich dem folgenden sehen können

Wählen Sie Ihr gewünschtes Bild aus und klicken Sie dann auf Öffnen

Der ausgewählte Dateiname wird im Formular-Upload angezeigt, wie im Bild oben gezeigt. Klicken Sie auf die Schaltfläche zum Hochladen eines Bildes

Wenn alles gut geht, erhalten Sie die folgenden Ergebnisse

Klicken Sie auf „Mein Bild anzeigen“! Verknüpfung

Sie sollten das hochgeladene Bild sehen können. Die Ergebnisse werden ungefähr wie folgt aussehen

Beachten Sie, dass der Name des hochgeladenen Bildes in der URL angezeigt wird. Wir haben den Bildnamen aus den Metadaten des hochgeladenen Bildes erhalten

Hinweis: Der Datei-Upload-Prozess bleibt für andere Dateitypen derselbe

Du magst vielleicht:

CodeIgniter-Datei-Upload

Hochladen von Bildern in CodeIgniter

Testen der Anwendung

ÄHNLICHE ARTIKEL