Jak nahrát obrázek a soubor do CodeZapalovač (s příkladem)
Fiona Brownová
CodeNahrávání souboru zapalovače
Správa souborů je nezbytná pro většinu webových aplikací. Pokud jste vývojářping systém pro správu obsahu, budete muset být schopni nahrávat obrázky, dokumenty Word, zprávy ve formátu PDF atd. Pokud pracujete na členském webu, možná budete muset zařídit, aby lidé mohli nahrávat své profilové obrázky. CodeTřída pro nahrávání souborů v Igniteru nám usnadňuje všechny výše uvedené kroky.
V tomto tutoriálu se podíváme na to, jak používat knihovnu pro nahrávání souborů k načítání souborů.
Nahrávání obrázků do CodeZapalovač
Nahrávání souboru do CodeZapalovač má dvě hlavní části. Frontend a backend. Frontend je spravován formulářem HTML, který používá soubor typu vstupu formuláře. Na backendu knihovna pro nahrávání souborů zpracuje odeslaný vstup z formuláře a zapíše jej do adresáře pro nahrávání.
Začněme vstupním formulářem.
Vytvořte nový adresář s názvem soubory v adresáři application/views
Přidejte následující soubory do application/views/files
- upload_form.php – toto zobrazení obsahuje HTML formulář, který má vstupní typ souboru a odešle vybraný soubor na server ke zpracování
- upload_result.php – toto zobrazení zobrazuje výsledky nahraného obrázku včetně odkazu, na který můžeme kliknout a výsledky zobrazit.
Přidejte následující kód do 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>
TADY,
- if (isset($error)){…} zkontroluje, zda byla nastavena chybová proměnná. Pokud je výsledek pravdivý, pak se uživateli zobrazí chyba vrácená nahrávací knihovnou.
- typ souboru umožňuje uživateli přejít do svého počítače a vybrat soubor pro nahrání.
Přidejte následující kód do 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>
TADY,
- používá pomocníka kotvy k vytvoření odkazu na nový nahraný soubor v adresáři obrázků. Název je načten z metadat obrázku, která jsou předána zobrazení, když byl soubor úspěšně nahrán.
Pojďme nyní vytvořit ovladač, který bude reagovat na naše nahrání obrázku
Přidejte nový soubor ImageUploadController.php do aplikace/řadiče
Přidejte následující kód do 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);
}
}
}
TADY,
- třída ImageUploadController rozšiřuje CI_Controller {…} definuje naši třídu řadiče a rozšiřuje základní řadič CI_Controller
- veřejná funkce __construct() {…} inicializuje metodu nadřazeného konstruktoru a načte pomocné adresy URL a formuláře
- public function index() {…} definuje metodu indexu, která se používá k zobrazení formuláře pro nahrání obrázku
- public function store() {…} definuje metodu, která nahraje obrázek a uloží jej na webový aplikační server.
- $config['upload_path'] = './images/'; nastaví adresář, kam se mají obrázky nahrát
- $config['allowed_types'] = 'gif|jpg|png'; definuje přijatelné přípony souborů. To je důležité z bezpečnostních důvodů. Povolené typy zajišťují, že budou nahrány pouze obrázky a že nebudou nahrány jiné typy souborů, jako je php, protože mají potenciál ohrozit server.
- $config['max_size'] = 2000; nastavit maximální velikost souboru v kilobajtech. V našem příkladu je maximální soubor, který lze nahrát, 2,000 2 kb, téměř 2,000 MB. Pokud se uživatel pokusí nahrát soubor větší než XNUMX XNUMX kb, nahrání obrázku se nezdaří a knihovna vrátí chybovou zprávu.
- $config['max_width'] = 1500; nastavuje maximální šířku obrázku, která je v našem případě 1,500 XNUMX px. Jakákoli větší šířka vede k chybě
- $config['max_height'] = 1500; definuje maximální přijatelnou výšku.
- $this->load->library('upload', $config); načte knihovnu pro nahrávání a inicializuje ji pomocí pole $config, které jsme definovali výše.
- pokud se (!$this->upload->do_upload('profile_image')) {…} pokusí nahrát odeslaný obrázek, který se v našem případě jmenuje obrázek_profilu
- $error = array('error' => $this->upload->display_errors()); nastaví chybovou zprávu, pokud se nahrávání nezdaří
- $this->load->view('files/upload_form', $error); načte formulář pro nahrání souboru a zobrazí chybovou zprávu vrácenou z knihovny pro nahrávání
- $data = array('image_metadata' => $this->upload->data()); nastaví metadata obrázku, pokud bylo nahrání úspěšné
- $this->load->view('files/upload_result', $data); úspěšně načte nahraný pohled a předá metadata nahraného souboru.
To je vše pro ovladač. Nyní vytvoříme adresář, do kterého se budou nahrávat naše obrázky. Vytvořte nový adresář „images“ v kořenovém adresáři vaší aplikace
Nakonec do našeho souboru routes.php přidáme dvě trasy, které zobrazí formulář a zobrazí výsledky
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
TADY,
- $route['upload-image'] = 'imageuploadcontroller'; definuje URL upload-image, který volá metodu indexu ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/store'; definuje obrázek úložiště URL, který přijímá vybraný uživatelský soubor a odešle jej na server.
Testování aplikace
Spustíme vestavěný PHP server
Otevřete terminál/příkazový řádek a přejděte do kořenového adresáře vaší aplikace. V mém případě je root umístěn na jednotce C:\Sites\ci-app
cd C:\Sites\ci-app
spusťte server pomocí následujícího příkazu
php -S localhost:3000
Načtěte do webového prohlížeče následující URL: http://localhost:3000/upload-image
budete moci vidět následující výsledky
Klikněte na vybrat soubor
Měli byste vidět dialogové okno podobné následujícímu
Vyberte požadovaný obrázek a klikněte na otevřít
Vybraný název souboru se zobrazí při nahrání formuláře, jak je znázorněno na obrázku výše. Klikněte na tlačítko nahrát obrázek
Za předpokladu, že vše půjde dobře, získáte následující výsledky
Klikněte na Zobrazit můj obrázek! Odkaz
Měli byste vidět obrázek, který jste nahráli. Výsledky budou podobné následujícím
Všimněte si, že název nahraného obrázku se zobrazí v adrese URL. Název obrázku jsme získali z nahraných metadat obrázku
Poznámka: Proces nahrávání souboru zůstává stejný pro ostatní typy souborů
