Hur man laddar upp bild och fil i CodeIgniter (med exempel)
Fiona Brown
CodeIgniter-filuppladdning
Filhantering är avgörande för de flesta webbapplikationer. Om du utvecklar ett innehållshanteringssystem måste du kunna ladda upp bilder, word-dokument, pdf-rapporter etc. Om du arbetar på en medlemswebbplats kan du behöva ta en bestämmelse så att folk kan ladda upp sin profil bilder. CodeIgniters filuppladdningsklass gör det enkelt för oss att göra allt ovanstående.
I den här handledningen kommer vi att titta på hur du använder filuppladdningsbiblioteket för att ladda filer.
Ladda upp bilder i CodeIgniter
Fil laddas upp i CodeIgniter har två huvuddelar. Frontend och backend. Gränssnittet hanteras av HTML-formuläret som använder formulärinmatningsfilen. På backend bearbetar filuppladdningsbiblioteket den inskickade inmatningen från formuläret och skriver den till uppladdningskatalogen.
Låt oss börja med inmatningsformuläret.
Skapa en ny katalog som heter filer i program-/vykatalogen
Lägg till följande filer i program/vyer/filer
- upload_form.php – den här vyn innehåller HTML-formuläret som har indatatypen av fil och skickar den valda filen till servern för bearbetning
- upload_result.php – den här vyn visar resultaten av den uppladdade bilden inklusive en länk som vi kan klicka på för att se resultaten.
Lägg till följande kod till 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>
HÄR,
- if (isset($error)){...} kontrollerar om felvariabeln har ställts in. Om resultatet är sant visas felet som returneras av uppladdningsbiblioteket för användaren.
- typfilen låter användaren bläddra till sin dator och välja en fil för uppladdning.
Lägg till följande kod till 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>
HÄR,
- använder ankarhjälpen för att skapa en länk till den nya uppladdade filen i bildkatalogen. Namnet hämtas från bildmetadata som skickas till vyn när filen har laddats upp.
Låt oss nu skapa kontrollern som kommer att svara på vår bilduppladdning
Lägg till en ny fil ImageUploadController.php i program/kontroller
Lägg till följande kod till 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);
}
}
}
HÄR,
- class ImageUploadController utökar CI_Controller {...} definierar vår styrenhetsklass och utökar basstyrenheten CI_Controller
- public funktion __construct() {...} initierar den överordnade konstruktormetoden och laddar webbadressen och formulärhjälparna
- public function index() {...} definierar indexmetoden som används för att visa bilduppladdningsformuläret
- public function store() {...} definierar metoden som laddar upp bilden och lagrar den på webbapplikationsservern.
- $config['upload_path'] = './images/'; ställer in katalogen där bilderna ska laddas upp
- $config['allowed_types'] = 'gif|jpg|png'; definierar acceptabla filtillägg. Detta är viktigt av säkerhetsskäl. De tillåtna typerna säkerställer att endast bilder laddas upp och andra filtyper som php inte kan laddas upp eftersom de har potential att äventyra servern.
- $config['max_size'] = 2000; ställ in den maximala filstorleken i kilobyte. I vårt exempel är den maximala filen som kan laddas upp 2,000 2 kb nära 2,000 MB. Om användaren försöker ladda upp en fil som är större än XNUMX XNUMX kb kommer bilden inte att laddas upp och biblioteket returnerar ett felmeddelande.
- $config['max_width'] = 1500; ställer in bildens maximala bredd som i vårt fall är 1,500 XNUMX px. Varje bredd som är större än så resulterar i ett fel
- $config['max_height'] = 1500; definierar den maximala acceptabla höjden.
- $this->load->library('uppladdning', $config); laddar uppladdningsbiblioteket och initierar det med arrayen $config som vi definierade ovan.
- om (!$this->upload->do_upload('profile_image')) {...} försöker ladda upp den inskickade bilden som i vårt fall heter profile_image
- $error = array('error' => $this->upload->display_errors()); ställer in felmeddelandet om uppladdningen misslyckas
- $this->load->view('filer/uppladdningsformulär', $error); laddar filuppladdningsformuläret och visar felmeddelandet som returneras från uppladdningsbiblioteket
- $data = array('image_metadata' => $this->upload->data()); ställer in bildens metadata om uppladdningen har lyckats
- $this->load->view('filer/uppladdningsresultat', $data); laddar den uppladdade vyn och skickar den uppladdade filens metadata.
Det är det för kontrollanten. Låt oss nu skapa katalogen dit våra bilder kommer att laddas upp till. Skapa en ny katalog "bilder" i din applikations rotkatalog
Slutligen kommer vi att annonsera två rutter till vår routes.php-fil som visar formuläret och visar resultat
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
HÄR,
- $route['upload-image'] = 'bilduppladdningskontroller'; definierar URL-uppladdningsbilden som anropar indexmetoden för ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/butik'; definierar URL-butiksbilden som accepterar den valda användarfilen och laddar upp den till servern.
Testar applikationen
Låt oss starta den inbyggda PHP-servern
Öppna terminalen/kommandoraden och bläddra till roten av din applikation. I mitt fall finns roten i enhet C:\Sites\ci-app
cd C:\Sites\ci-app
starta servern med följande kommando
php -S localhost:3000
Ladda följande URL i din webbläsare: http://localhost:3000/upload-image
du kommer att kunna se följande resultat
Klicka på välj fil
Du bör kunna se ett dialogfönster som liknar följande
Välj önskad bild och klicka sedan på öppna
Det valda filnamnet kommer att visas i formuläruppladdningen som visas i bilden ovan. Klicka på knappen för att ladda upp bild
Du kommer att få följande resultat förutsatt att allt går bra
Klicka på Visa min bild! Länk
Du bör kunna se bilden du laddade upp. Resultaten kommer att likna följande
Observera att den uppladdade bildens namn visas i URL:en. Vi fick bildnamnet från den uppladdade bildens metadata
Obs: Filöverföringsprocessen förblir densamma för andra typer av filer