Hvordan laste opp bilde og fil i CodeIgniter (med eksempel)
Fiona Brown
CodeIgniter-filopplasting
Filbehandling er viktig for de fleste nettapplikasjoner. Hvis du utvikler et innholdsstyringssystem, må du kunne laste opp bilder, word-dokumenter, pdf-rapporter osv. Hvis du jobber med en medlemsside, må du kanskje ta en bestemmelse for at folk kan laste opp profilen sin bilder. CodeIgniters filopplastingsklasse gjør det enkelt for oss å gjøre alt ovenfor.
I denne opplæringen vil vi se på hvordan du bruker filopplastingsbiblioteket til å laste filer.
Laster opp bilder i CodeIgniter
Fil laster opp i CodeIgniter har to hoveddeler. Frontend og backend. Grensesnittet håndteres av HTML-skjemaet som bruker skjemainndatafilen. På baksiden behandler filopplastingsbiblioteket de innsendte inndataene fra skjemaet og skriver det til opplastingskatalogen.
La oss begynne med inndataskjemaet.
Opprett en ny katalog kalt filer i program/visningskatalog
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 som vi kan klikke 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('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)){...} sjekker om feilvariabelen er satt. Hvis resultatet er sant, vises feilen som returneres av opplastingsbiblioteket til brukeren.
- typefilen lar brukeren nettlese til datamaskinen sin og velge en fil for opplasting.
Legg til 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,
- bruker ankerhjelperen til å lage en lenke til den nye opplastede filen i bildekatalogen. Navnet hentes fra bildemetadataene som sendes til visningen når filen er lastet opp.
La oss nå lage kontrolleren som vil svare 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 de akseptable filtypene. Dette er viktig av sikkerhetsmessige årsaker. De tillatte typene sikrer at bare bilder lastes opp og andre filtyper som php ikke kan lastes opp fordi de har potensial til å kompromittere serveren.
- $config['max_size'] = 2000; angi maksimal filstørrelse i kilobyte. I vårt eksempel er den maksimale filen som kan lastes opp 2,000 kb nær 2MB. Hvis brukeren prøver å laste opp en fil som er større enn 2,000 kb, vil bildet mislykkes i å laste opp og biblioteket vil returnere en feilmelding.
- $config['max_width'] = 1500; angir maksimal bredde på bildet som i vårt tilfelle er 1,500 px. Enhver bredde større enn det 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 er det for kontrolleren. La oss nå lage katalogen der bildene våre skal lastes opp til. Opprett en ny katalog "bilder" i rotkatalogen til applikasjonen din
Til slutt vil vi legge ut to ruter til vår routes.php-fil som viser skjemaet 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'] = 'bildeopplastingskontroller'; definerer URL-opplastingsbildet som kaller indeksmetoden til ImageUploadController
- $route['store-image'] = 'bildeopplastingskontroller/butikk'; definerer URL-lagerbildet som godtar den valgte brukerfilen og laster den opp til serveren.
Tester applikasjonen
La oss starte den innebygde PHP-serveren
Åpne terminalen/kommandolinjen og bla til roten av programmet. I mitt tilfelle er roten plassert i stasjonen 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
vil du 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 skjemaopplastingen som vist på bildet ovenfor. Klikk på knappen for å laste opp bilde
Du vil få følgende resultater forutsatt at alt går bra
Klikk på Se mitt bilde! Link
Du skal kunne se bildet du lastet opp. Resultatene vil ligne på følgende
Merk at navnet på det opplastede bildet vises i URL-en. Vi fikk bildenavnet fra de opplastede metadataene for bildet
Merk: Filopplastingsprosessen forblir den samme for andre typer filer
