Slik laster du opp bilde og fil i CodeTennapparat (med eksempel)
Fiona Brown
⚡ Smart oppsummering
CodeIgniter File Upload bruker det innebygde opplastingsbiblioteket til å flytte bilder og dokumenter fra et HTML-skjema til en serverkatalog. Dette eksemplet bygger et opplastingsskjema, en kontroller som validerer type og størrelse, og en resultatside som bekrefter opplastingen.
CodeIgniter-filopplasting
Filbehandling er viktig for de fleste webapplikasjoner. Hvis du er utviklerping et innholdsstyringssystem, må du kunne laste opp bilder, Word-dokumenter, PDF-rapporter og mer. Hvis du jobber med et medlemsnettsted, må du kanskje legge til rette for at folk kan laste opp profilbildene sine. CodeIgniter File Uploading-klassen gjør det enkelt for oss å gjøre alt det ovennevnte.
I denne opplæringen vil vi se på hvordan du bruker filopplastingsbiblioteket til å laste filer.
Laster opp bilder i CodeTenner
Fil laster opp i CodeTenner har to hoveddeler: frontend og backend. Frontend håndteres av HTML-skjemaet som bruker form input-typen fil. På backend behandler filopplastingsbiblioteket den innsendte inputen fra skjemaet og skriver den til opplastingskatalogen.
La oss begynne med inndataskjemaet.
Opprett en ny katalog kalt filer i katalogen application/views.
Legg til følgende filer i applikasjon/visninger/filer
- upload_form.php – denne visningen inneholder HTML-skjemaet som har inndatatypen fil og sender den valgte filen til serveren for behandling
- upload_result.php – denne visningen viser resultatene av det opplastede bildet, inkludert en lenke vi kan klikke på for å se resultatene.
Legg til 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(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>
HER,
- hvis (isset($error)){…} sjekker om feilvariabelen er satt. Hvis resultatet er sant, vises feilen som returneres av opplastingsbiblioteket til brukeren.
- Typefilen lar brukeren bla til datamaskinen sin og velge en fil for opplasting.
Legg til følgende kode i 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,
- bruker ankerhjelperen til å opprette en lenke til den nylig opplastede filen i bildekatalogen. Navnet hentes fra bildemetadataene som sendes til visningen når filen er lastet opp.
La oss nå lage kontrolleren som skal reagere på bildeopplastingen vår.
Legg til en ny fil ImageUploadController.php i program/kontrollere
Legg til 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 utvider CI_Controller {...} definerer vår kontrollerklasse og utvider basekontrolleren CI_Controller
- offentlig funksjon __construct() {...} initialiserer den overordnede konstruktørmetoden og laster inn url- og skjemahjelperne
- public function index() {...} definerer indeksmetoden som brukes til å vise bildeopplastingsskjemaet
- public function store() {...} definerer metoden som skal laste opp bildet og lagre det på nettapplikasjonsserveren.
- $config['upload_path'] = './images/'; setter katalogen der bildene skal lastes opp
- $config['allowed_types'] = 'gif|jpg|png'; definerer akseptable filtyper. Dette er viktig av sikkerhetsmessige årsaker. De tillatte typene sikrer at bare bilder lastes opp, og andre filtyper som PHP kan ikke lastes opp, fordi de har potensial til å kompromittere serveren.
- $config['max_size'] = 2000; angir maksimal filstørrelse i kilobyte. I vårt eksempel er den maksimale filen som kan lastes opp 2,000 kb, nærmere 2 MB. Hvis brukeren prøver å laste opp en fil som er større enn 2,000 kb, vil bildet ikke lastes opp, og biblioteket vil returnere en feilmelding.
- $config['max_width'] = 1500; angir maksimal bredde på bildet, som i vårt tilfelle er 1,500 piksler. Enhver bredde større enn dette resulterer i en feil.
- $config['max_height'] = 1500; definerer maksimal akseptabel høyde.
- $this->load->library('opplasting', $config); laster opplastingsbiblioteket og initialiserer det med matrisen $config som vi definerte ovenfor.
- hvis (!$this->upload->do_upload('profile_image')) {…} prøver å laste opp det innsendte bildet, som i vårt tilfelle heter profile_image
- $error = array('error' => $this->upload->display_errors()); angir feilmeldingen hvis opplastingen mislykkes
- $this->load->view('filer/upload_form', $error); laster filopplastingsskjemaet og viser feilmeldingen som returneres fra opplastingsbiblioteket
- $data = array('image_metadata' => $this->upload->data()); angir metadata for bildet hvis opplastingen har vært vellykket
- $this->load->view('filer/opplastingsresultat', $data); laster den opplastede visningen og sender metadataene for den opplastede filen.
Det var alt for kontrolleren. La oss nå opprette katalogen der bildene våre skal lastes opp. Opprett en ny katalog med navnet «bilder» i rotkatalogen til applikasjonen din.
Til slutt legger vi til to ruter i routes.php-filen vår som viser skjemaet og resultatene.
Åpne application/config/routes.php og legg til følgende ruter
$route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
HER,
- $rute['opplastingsbilde'] = 'bildeopplastingskontroller'; definerer URL upload-image som kaller indeksmetoden til ImageUploadController
- $rute['store-image'] = 'imageuploadcontroller/store'; definerer URL store-image som godtar den valgte brukerfilen og laster den opp til serveren.
Slik fikser du vanlige CodeFeil ved opplasting av Igniter-filer
De fleste opplastingsfeil returnerer en tydelig melding fra opplastingsbiblioteket. Listen nedenfor viser de vanlige feilene og rettelsene.
- Filtypen du prøver å laste opp er ikke tillatt: legg til den manglende utvidelsen i allowed_types-konfigurasjonen, for eksempel 'gif|jpg|png|pdf'.
- Filen du prøver å laste opp er større enn den tillatte størrelsen: øk max_size, og bekreft at upload_max_filesize og post_max_size i php.ini er store nok.
- Opplastingsstien ser ikke ut til å være gyldig: opprett upload_path-katalogen og sørg for at webserveren har skrivetillatelse til den.
- Du valgte ikke en fil å laste opp: sjekk at inputnavnet samsvarer med do_upload()-argumentet og at skjemaet bruker enctype multipart/form-data.
Tester applikasjonen
La oss starte den innebygde PHP-serveren.
Åpne terminalen eller kommandolinjen og bla til rotmappen til applikasjonen din. I mitt tilfelle ligger rotmappen på stasjon C:\Sites\ci-app
cd C:\Sites\ci-app
Start serveren ved å bruke følgende kommando
php -S localhost:3000
Last inn følgende URL i nettleseren din: http://localhost:3000/upload-image
Du vil kunne se følgende resultater
Klikk på velg fil
Du bør kunne se et dialogvindu som ligner på følgende
Velg ønsket bilde, og klikk deretter på åpne
Det valgte filnavnet vil vises i opplastingsskjemaet som vist på bildet ovenfor. Klikk på Last opp bilde-knappen.
Du vil få følgende resultater, forutsatt at alt går bra.
Klikk på lenken Vis bildet mitt!
Du skal kunne se bildet du lastet opp. Resultatene vil ligne på det følgende.
Legg merke til at navnet på det opplastede bildet vises i URLVi fikk bildenavnet fra metadataene for det opplastede bildet.
Merk: Filopplastingsprosessen er den samme for andre filtyper.
