Jak nahrát obrázek a soubor do CodeZapalovač (s příkladem)

Od: Fiona Brownová Fiona Brownová
Hours aktualizováno

⚡ Chytré shrnutí

CodeIgniter File Upload používá vestavěnou knihovnu Upload k přesunu obrázků a dokumentů z HTML formuláře do adresáře serveru. Tento příklad vytvoří formulář pro upload, kontroler, který ověřuje typ a velikost, a stránku s výsledky potvrzujícími upload.

  • 📁 Základní třída: Knihovna pro nahrávání (Upload) zajišťuje backendovou práci s ověřováním odeslaného souboru a jeho zápisem do vybraného adresáře pro nahrávání.
  • ️ Dvě části: Nahrávání vyžaduje HTML formulář na frontendu se vstupním typem souboru a backendový kontroler, který zpracovává odeslání.
  • 🔒 Seznam povolených typů: Konfigurace allowed_types akceptuje pouze uvedené přípony, jako jsou gif, jpg a png, a blokuje tak rizikové soubory, jako jsou PHP skripty.
  • 📏 Omezení velikosti: Klíče max_size, max_width a max_height odmítají soubory, které překračují limity, a vracejí chybovou zprávu.
  • ???? Kódování formuláře: Formulář musí mít nastavenou enctype na multipart/form-data, jinak se vybraný soubor nikdy nedostane na server.
  • 📄 Metadata výsledků: V případě úspěchu vrátí upload->data() podrobnosti o souboru použité k vytvoření odkazu na nově uložený obrázek.
  • 🤖 AI Assist: Nástroje umělé inteligence dokáží vygenerovat formulář pro nahrávání, pravidla ověřování řadičů a ošetření chyb a poté je zkontrolovat, zda neobsahují bezpečnostní mezery.
Přečíst více

CodeNahrávání souboru zapalovače

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 a další. Pokud pracujete na členském webu, možná budete muset zajistit, aby lidé mohli nahrávat své profilové obrázky. CodeTřída Igniter File Uploading nám usnadňuje všechny výše uvedené činnosti.

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 HTML formulářem, který používá vstupní typ formuláře soubor. Na backendu knihovna pro nahrávání souborů zpracovává odeslaný vstup z formuláře a zapisuje jej do adresáře pro nahrávání.

Začněme se vstupním formulářem.

V adresáři application/views vytvořte nový adresář s názvem files.

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 – tento pohled zobrazuje výsledky nahraného obrázku, včetně odkazu, na který můžeme kliknout pro zobrazení výsledků.

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(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>

TADY,

  • Funkce if (isset($error)){…} kontroluje, zda byla nastavena proměnná error. Pokud je výsledek true, zobrazí se uživateli chyba vrácená knihovnou pro nahrávání.
  • Typový soubor umožňuje uživateli přejít do počítače a vybrat soubor k nahrání.

SOUVISEJÍCÍ ČLÁNKY

Přidejte následující kód do souboru 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á pomocnou metodu anchor k vytvoření odkazu na nově nahraný soubor v adresáři obrázků. Název se načte z metadat obrázku, která se předávají zobrazení po úspěšném nahrání souboru.

Nyní si vytvořme kontroler, který bude reagovat na nahrává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řípustné přípony souborů. To je důležité z bezpečnostních důvodů. Povolené typy zajišťují, že se nahrávají pouze obrázky a jiné typy souborů, jako například PHP, nelze nahrávat, protože by mohly ohrozit server.
    • $config['max_size'] = 2000; nastavuje maximální velikost souboru v kilobajtech. V našem příkladu je maximální velikost souboru, který lze nahrát, 2 000 kB, což se blíží 2 MB. Pokud se uživatel pokusí nahrát soubor větší než 2 000 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 px. Jakákoli větší šířka způsobí chybu.
    • $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 (!$this->upload->do_upload('profile_image')) {…} se pokusí nahrát odeslaný obrázek, který se v našem případě jmenuje profile_image
    • $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 pro kontrolery vše. Nyní si vytvořme adresář, kam budou naše obrázky nahrány. V kořenovém adresáři vaší aplikace vytvořte nový adresář „images“.

Nakonec do našeho souboru routes.php přidáme dvě trasy, které zobrazí formulář a výsledky.

Otevřete soubor application/config/routes.php a přidejte následující trasy

$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

TADY,

  • $route['upload-image'] = 'imageuploadcontroller'; definuje URL upload-image, který volá metodu index třídy ImageUploadController.
  • $route['store-image'] = 'imageuploadcontroller/store'; definuje URL store-image, který přijme vybraný uživatelský soubor a nahraje ho na server.

Jak opravit běžné CodeChyby při nahrávání souborů Igniter

Většina selhání nahrávání vrátí z knihovny nahrávání jasnou zprávu. Níže uvedený seznam popisuje běžné chyby a jejich opravy.

  • Typ souboru, který se pokoušíte nahrát, není povolen: přidejte chybějící příponu do konfigurace allowed_types, například 'gif|jpg|png|pdf'.
  • Soubor, který se pokoušíte nahrát, je větší než povolená velikost: Zvyšte proměnnou max_size a ověřte, zda jsou proměnné upload_max_filesize a post_max_size v souboru php.ini dostatečně velké.
  • Cesta pro nahrávání se zdá být neplatná: Vytvořte adresář upload_path a ujistěte se, že webový server má do něj oprávnění k zápisu.
  • Nevybrali jste soubor k nahrání: Zkontrolujte, zda vstupní název odpovídá argumentu do_upload() a zda formulář používá typ enctype multipart/form-data.

Testování aplikace

Spusťme vestavěný PHP server.

Otevřete terminál nebo příkazový řádek a přejděte do kořenového adresáře vaší aplikace. V mém případě se kořenový adresář nachází na disku 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 následující URL ve vašem webovém prohlížeči: http://localhost:3000/upload-image

Budete moci vidět následující výsledky

Nahrávání obrázků do CodeZapalovač

Klikněte na vybrat soubor

Měli byste vidět dialogové okno podobné následujícímu

Nahrávání obrázků do CodeZapalovač

Vyberte požadovaný obrázek a poté klikněte na tlačítko Otevřít

Nahrávání obrázků do CodeZapalovač

Vybraný název souboru se zobrazí ve formuláři pro nahrání, 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.

Nahrávání obrázků do CodeZapalovač

Klikněte na odkaz Zobrazit můj obrázek!

Měli byste vidět nahraný obrázek. Výsledky budou podobné následujícím.

Nahrávání obrázků do CodeZapalovač

Všimněte si, že název nahraného obrázku se zobrazuje v URLNázev obrázku jsme získali z nahraných metadat obrázku.

Poznámka: Proces nahrávání souborů zůstává stejný i pro ostatní typy souborů.

Nejčastější dotazy

Jedno CodeKnihovna pro upload Igniter 3 zpracovává jeden soubor na jedno volání funkce do_upload(), takže pro každou položku procházíte smyčkou $_FILES a voláte ji. CodeIgniter 4 podporuje vícenásobné nahrávání přímo prostřednictvím metody getFileMultiple().

Ne. CodeIgniter 4 nahrazuje knihovnu pro nahrávání API pro požadavky na soubory. Volá se $this->request->getFile('field'), ověřuje se a poté se soubor ukládá pomocí funkce move(), místo načítání samostatné knihovny pro nahrávání.

Nastavením $config['encrypt_name'] = TRUE přiřadíte každému souboru náhodný název, nebo nastavte $config['file_name'] na vámi zvolenou hodnotu. Tím se zabrání přepsání existujících souborů, které sdílejí stejný původní název.

Ano. Umělá inteligence dokáže vytvořit seznam povolených typů (allowed_types), limity velikosti a ošetření chyb a navrhnout další kontroly, jako je ověření skutečného typu MIME. Před nasazením vždy otestujte vygenerovaná pravidla na skutečných souborech.

Ano. Vložte chybovou zprávu a váš ovladač a umělá inteligence dokáže přesně určit problémy, jako je chybějící vícedílný formulář, nezapisovatelná upload_path nebo chybějící rozšíření v allowed_types, a poté navrhnout opravu.

Shrňte tento příspěvek takto: