Sådan uploader du et billede og en fil i CodeTændingsapparat (med eksempel)
Fiona Brown
CodeUpload af Igniter-fil
Filhåndtering er essentielt for de fleste webapplikationer. Hvis du er udviklerping et indholdsstyringssystem, skal du kunne uploade billeder, Word-dokumenter, PDF-rapporter osv. Hvis du arbejder på et medlemswebsted, skal du muligvis sørge for, at folk kan uploade deres profilbilleder. CodeIgniters File Uploading-klasse 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 Codetændsats
Fil uploades i Codetændsats 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-image, der kalder index-metoden for ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/store'; definerer URL store-image, 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, at navnet på det uploadede billede vises i URLVi fik billednavnet fra de uploadede billedmetadata.
Bemærk: Filoverførselsprocessen forbliver den samme for andre filtyper
