Sådan uploades billede og fil i CodeIgniter (med eksempel)

CodeIgniter fil upload

Filhåndtering er afgørende for de fleste webapplikationer. Hvis du udvikler et indholdsstyringssystem, skal du være i stand til at uploade billeder, word-dokumenter, pdf-rapporter osv. Hvis du arbejder på en medlemsside, skal du muligvis sørge for, at folk kan uploade deres profil billeder. CodeIgniters filoverførselsklasse gør det nemt for os at gøre alt ovenstående.

I denne vejledning vil vi se på, hvordan du bruger filoverførselsbiblioteket til at indlæse filer.

Upload af billeder i CodeIgniter

Fil uploades i CodeIgniter har to hoveddele. Frontend og backend. Frontenden håndteres af HTML-formularen, der bruger formularens inputtypefil. På backend behandler filoverførselsbiblioteket det indsendte input fra formularen og skriver det til uploadbiblioteket.

Lad os begynde med inputformularen.

Opret en ny mappe kaldet filer i program-/visningsmappen

Tilføj følgende filer i applikation/visninger/filer

upload_form.php – denne visning indeholder HTML-formularen, der har inputtypen fil og sender den valgte fil til serveren til behandling
upload_result.php – denne visning viser resultaterne af det uploadede billede inklusive et link, som vi kan klikke på for at se resultaterne.

Tilføj følgende kode til 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>

HER,

if (isset($error)){...} kontrollerer om fejlvariablen er indstillet. Hvis resultatet er sandt, vises fejlen returneret af uploadbiblioteket for brugeren.
typefilen giver brugeren mulighed for at browser til deres computer og vælge en fil til upload.

Annoncer følgende kode til 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>

HER,

bruger ankerhjælperen til at oprette et link til den nye uploadede fil i billedbiblioteket. Navnet hentes fra billedmetadataene, der sendes til visningen, når filen er blevet uploadet.

Lad os nu oprette controlleren, der vil reagere på vores upload af billeder

Tilføj en ny fil ImageUploadController.php i applikation/controllere

Tilføj følgende kode til 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);
        }
    }

}

HER,

klasse ImageUploadController udvider CI_Controller {...} definerer vores controllerklasse og udvider basiscontrolleren CI_Controller
offentlig funktion __construct() {...} initialiserer den overordnede konstruktørmetode og indlæser url- og formularhjælperne
public function index() {…} definerer indeksmetoden, der bruges til at vise billedoverførselsformularen
public function store() {...} definerer metoden, der vil uploade billedet og gemme det på webapplikationsserveren.

$config['upload_path'] = './images/'; indstiller den mappe, hvor billederne skal uploades
$config['allowed_types'] = 'gif|jpg|png'; definerer de acceptable filtypenavne. Dette er vigtigt af sikkerhedsmæssige årsager. De tilladte typer sikrer, at kun billeder uploades, og at andre filtyper såsom php ikke kan uploades, fordi de har potentiale til at kompromittere serveren.
$config['max_size'] = 2000; indstille den maksimale filstørrelse i kilobyte. I vores eksempel er den maksimale fil, der kan uploades, 2,000 kb tæt på 2 MB. Hvis brugeren forsøger at uploade en fil, der er større end 2,000 kb, vil billedet ikke kunne uploades, og biblioteket vil returnere en fejlmeddelelse.
$config['max_width'] = 1500; indstiller den maksimale bredde på billedet, som i vores tilfælde er 1,500 px. Enhver bredde større end det resulterer i en fejl
$config['max_height'] = 1500; definerer den maksimalt acceptable højde.
$this->load->library('upload', $config); indlæser uploadbiblioteket og initialiserer det med arrayet $config, som vi definerede ovenfor.
hvis (!$this->upload->do_upload('profile_image')) {...} forsøger at uploade det indsendte billede, som i vores tilfælde hedder profile_image
$error = array('error' => $this->upload->display_errors()); indstiller fejlmeddelelsen, hvis uploaden mislykkes
$this->load->view('filer/upload_form', $error); indlæser filoverførselsformularen og viser fejlmeddelelsen, der returneres fra uploadbiblioteket
$data = array('image_metadata' => $this->upload->data()); indstiller billedets metadata, hvis uploaden er lykkedes
$this->load->view('filer/upload_result', $data); indlæser den uploadede visning og sender de uploadede filmetadata.

Det er det for controlleren. Lad os nu oprette den mappe, hvor vores billeder vil blive uploadet til. Opret en ny mappe "billeder" i dit programs rodbibliotek

Til sidst vil vi tilføje to ruter til vores routes.php-fil, der viser formularen og viser resultater

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

HER,

$route['upload-image'] = 'imageuploadcontroller'; definerer URL upload-billedet, der kalder indeksmetoden for ImageUploadController
$route['store-image'] = 'imageuploadcontroller/butik'; definerer URL-lagerbilledet, der accepterer den valgte brugerfil og uploader den til serveren.

Test af applikationen

Lad os starte den indbyggede PHP-server

Åbn terminalen/kommandolinjen, og gå til roden af din applikation. I mit tilfælde er roden placeret i drev C:\Sites\ci-app

cd C:\Sites\ci-app

start serveren ved hjælp af følgende kommando

php -S localhost:3000

Indlæs følgende URL i din webbrowser: http://localhost:3000/upload-image

vil du kunne se følgende resultater

Klik på vælg fil

Du burde kunne se et dialogvindue, der ligner det følgende

Vælg det ønskede billede og klik derefter på åben

Det valgte filnavn vises i formularen upload som vist på billedet ovenfor. Klik på knappen til upload af billede

Du vil få følgende resultater, forudsat at alt går godt

Klik på Se mit billede! Link

Du burde kunne se det billede, du har uploadet. Resultaterne vil ligne følgende

Bemærk navnet på det uploadede billede vises i URL'en. Vi fik billednavnet fra de uploadede billedmetadata

Bemærk: Filoverførselsprocessen forbliver den samme for andre filtyper

Du kan lide:

CodeIgniter fil upload

Upload af billeder i CodeIgniter

Test af applikationen

RELATEREDE ARTIKLER