Kuvan ja tiedoston lataaminen CodeSytytin (esimerkillä)

by: Fiona Brown Fiona Brown
Hours Päivitetty

⚡ Älykäs yhteenveto

CodeIgniter File Upload käyttää sisäänrakennettua Upload-kirjastoa kuvien ja asiakirjojen siirtämiseen HTML-lomakkeesta palvelimen hakemistoon. Tässä esimerkissä luodaan latauslomake, tyypin ja koon validoiva ohjain sekä latauksen vahvistava tulossivu.

  • 📁 Ydinluokka: Latauskirjasto hoitaa taustatyön, jossa validoidaan lähetetty tiedosto ja kirjoitetaan se valittuun lataushakemistoon.
  • 🖼️ Kaksi osaa: Lataukseen tarvitaan HTML-lomake käyttöliittymässä, jossa on syötetyyppitiedosto, sekä taustajärjestelmän ohjain, joka käsittelee lähetyksen.
  • 🔒 Tyyppi Valkolista: allowed_types-määritys hyväksyy vain luetellut tiedostopäätteet, kuten gif, jpg ja png, estäen riskialttiit tiedostot, kuten PHP-skriptit.
  • 📏 Kokorajoitukset: Max_size-, max_width- ja max_height-näppäimet hylkäävät rajoitukset ylittävät tiedostot ja palauttavat selkeän virheilmoituksen.
  • 📝 Lomakkeen koodaus: Lomakkeen enctype-parametrin on oltava multipart/form-data, muuten valittu tiedosto ei koskaan päädy palvelimelle.
  • 📄 Tulosmetatiedot: Onnistuessaan upload->data() palauttaa tiedostotiedot, joita käytettiin linkin luomiseen juuri tallennettuun kuvaan.
  • 🤖 AI Assist: Tekoälytyökalut voivat luoda latauslomakkeen, ohjaimen validointisäännöt ja virheiden käsittelyn ja sitten tarkistaa ne tietoturva-aukkojen varalta.
Lue lisää

CodeSytytintiedoston lataus

CodeSytytintiedoston lataus

Tiedostonhallinta on olennaista useimmille verkkosovelluksille. Jos olet kehittäjäping sisällönhallintajärjestelmää, sinun on voitava ladata kuvia, Word-dokumentteja, PDF-raportteja ja paljon muuta. Jos työskentelet jäsensivustolla, sinun on ehkä tarjottava mahdollisuus ihmisille ladata profiilikuviaan. CodeIgniter-tiedostojen latauskurssin avulla voimme helposti tehdä kaiken edellä mainitun.

Tässä opetusohjelmassa tarkastellaan, kuinka tiedostojen latauskirjastoa käytetään tiedostojen lataamiseen.

Kuvien lataaminen kohteeseen Codesytytin

Tiedoston lataus sisään Codesytytin Siinä on kaksi pääosaa: käyttöliittymä ja taustajärjestelmä. Käyttöliittymää käsittelee HTML-lomake, joka käyttää lomakesyöttötyyppiä tiedosto. Taustajärjestelmässä tiedostonlatauskirjasto käsittelee lomakkeelta lähetetyn syötteen ja kirjoittaa sen lataushakemistoon.

Aloitetaan syöttölomakkeella.

Luo uusi hakemisto nimeltä files application/views-hakemistoon.

Lisää seuraavat tiedostot sovellukseen/näkymiin/tiedostoihin

  • upload_form.php – tämä näkymä sisältää HTML-lomakkeen, jossa on syötetyyppinen tiedosto ja joka lähettää valitun tiedoston palvelimelle käsittelyä varten
  • upload_result.php – tämä näkymä näyttää ladatun kuvan tulokset, mukaan lukien linkin, jota napsauttamalla voimme tarkastella tuloksia.

Lisää seuraava koodi tiedostoon 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>

TÄSSÄ,

  • if (isset($error)){…} tarkistaa, onko virhemuuttuja asetettu. Jos tulos on tosi, latauskirjaston palauttama virhe näytetään käyttäjälle.
  • Tiedostotyypin avulla käyttäjä voi selata tietokonettaan ja valita ladattavan tiedoston.
Älä Miss:

Lisää seuraava koodi tiedostoon 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>

TÄSSÄ,

  • käyttää ankkuriavustajaa luodakseen linkin juuri ladattuun tiedostoon kuvahakemistossa. Nimi haetaan kuvan metatiedoista, jotka välitetään näkymään, kun tiedosto on ladattu onnistuneesti.

Luodaan nyt ohjain, joka reagoi kuvan lataamiseen.

Lisää uusi tiedosto ImageUploadController.php kohtaan application/controllers

Lisää seuraava koodi tiedostoon 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);
}
}
 
}

TÄSSÄ,

  • luokka ImageUploadController laajentaa CI_Controller {…} määrittää ohjainluokkamme ja laajentaa perusohjainta CI_Controller
  • julkinen funktio __construct() {…} alustaa emokonstruktorimenetelmän ja lataa url- ja lomakeapuohjelmat
  • public function index() {…} määrittää indeksimenetelmän, jota käytetään kuvien latauslomakkeen näyttämiseen
  • public function store() {…} määrittää menetelmän, jolla kuva ladataan ja tallennetaan verkkosovelluspalvelimelle.
    • $config['upload_path'] = './images/'; määrittää hakemiston, johon kuvat ladataan
    • $config['allowed_types'] = 'gif|jpg|png'; määrittää hyväksyttävät tiedostopäätteet. Tämä on tärkeää turvallisuussyistä. Sallitut tyypit varmistavat, että vain kuvia ladataan eikä muita tiedostotyyppejä, kuten PHP:tä, voida ladata, koska ne voivat vaarantaa palvelimen.
    • $config['max_size'] = 2000; asettaa tiedoston enimmäiskoon kilotavuina. Esimerkissämme ladattavan tiedoston enimmäiskoko on 2 000 kt, lähellä 2 Mt. Jos käyttäjä yrittää ladata tiedoston, joka on suurempi kuin 2 000 kt, kuvan lataus epäonnistuu ja kirjasto palauttaa virheilmoituksen.
    • $config['max_width'] = 1500; asettaa kuvan maksimileveyden, joka meidän tapauksessamme on 1 500 px. Tätä suurempi leveys aiheuttaa virheen.
    • $config['max_height'] = 1500; määrittelee suurimman sallitun korkeuden.
    • $this->load->library('lataa', $config); lataa latauskirjaston ja alustaa sen taulukolla $config, jonka määritimme yllä.
    • jos (!$this->upload->do_upload('profile_image')) {…} yrittää ladata lähetetyn kuvan, jonka nimi on tässä tapauksessa profiilikuva
    • $error = array('error' => $this->upload-> display_errors()); asettaa virheilmoituksen, jos lataus epäonnistuu
    • $this->load->view('files/upload_form', $error); lataa tiedoston latauslomakkeen ja näyttää latauskirjastosta palautetun virhesanoman
    • $tiedot = array('image_metadata' => $this->load->data()); asettaa kuvan metatiedot, jos lataus on onnistunut
    • $this->load->view('files/upload_result', $data); lataa onnistuneesti ladatun näkymän ja välittää ladatun tiedoston metatiedot.

Siinä kaikki ohjaimen osalta. Luodaan nyt hakemisto, johon kuvat ladataan. Luo uusi hakemisto ”images” sovelluksesi juurihakemistoon.

Lopuksi lisäämme kaksi reittiä routes.php-tiedostoomme, jotka näyttävät lomakkeen ja tulokset.

Avaa application/config/routes.php ja lisää seuraavat reitit

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

TÄSSÄ,

  • $route['upload-image'] = 'kuvanlatausohjain'; määrittää URL upload-image, joka kutsuu ImageUploadControllerin index-metodia
  • $route['store-image'] = 'imageuploadcontroller/store'; määrittelee URL store-image, joka hyväksyy valitun käyttäjätiedoston ja lataa sen palvelimelle.

Kuinka korjata yleinen CodeIgniter-tiedoston latausvirheet

Useimmat latausvirheet palauttavat selkeän viestin latauskirjastosta. Alla olevassa luettelossa on yleisimmät virheet ja niiden korjaukset.

  • Tiedostotyyppi, jota yrität ladata, ei ole sallittu: Lisää puuttuva tiedostotunniste allowed_types-määritykseen, esimerkiksi 'gif|jpg|png|pdf'.
  • Ladattava tiedosto on sallittua kokoa suurempi: nosta max_size-arvoa ja varmista, että php.ini-tiedostossa olevat upload_max_filesize ja post_max_size ovat riittävän suuria.
  • Latauspolku ei näytä olevan kelvollinen: Luo upload_path-hakemisto ja varmista, että web-palvelimella on siihen kirjoitusoikeudet.
  • Et valinnut ladattavaa tiedostoa: Tarkista, että syötteen nimi vastaa do_upload()-argumenttia ja että lomake käyttää enctype multipart/form-data -tyyppiä.

Sovelluksen testaus

Käynnistämme sisäänrakennetun PHP-palvelimen.

Avaa pääte tai komentorivi ja selaa sovelluksesi juurihakemistoon. Minun tapauksessani juurihakemisto sijaitsee asemassa C:\Sites\ci-app.

cd C:\Sites\ci-app

Käynnistä palvelin seuraavalla komennolla

php -S localhost:3000

Lataa seuraavat URL verkkoselaimessasi: http://localhost:3000/upload-image

Näet seuraavat tulokset

Kuvien lataaminen kohteeseen Codesytytin

Napsauta valitse tiedosto

Sinun pitäisi pystyä näkemään seuraavan kaltainen valintaikkuna

Kuvien lataaminen kohteeseen Codesytytin

Valitse haluamasi kuva ja napsauta sitten Avaa

Kuvien lataaminen kohteeseen Codesytytin

Valitun tiedoston nimi näkyy latauslomakkeessa, kuten yllä olevassa kuvassa näkyy. Napsauta Lataa kuva -painiketta.

Saat seuraavat tulokset olettaen, että kaikki menee hyvin.

Kuvien lataaminen kohteeseen Codesytytin

Klikkaa Näytä kuvani! -linkkiä

Sinun pitäisi nähdä lataamasi kuva. Tulokset ovat samankaltaisia ​​kuin seuraavat.

Kuvien lataaminen kohteeseen Codesytytin

Huomaa, että ladatun kuvan nimi näkyy URLSaimme kuvan nimen ladatun kuvan metatiedoista.

Huomautus: Tiedoston latausprosessi pysyy samana muille tiedostotyypeille.

UKK

CodeIgniter 3 Upload -kirjasto käsittelee yhden tiedoston per do_upload()-kutsu, joten käytät silmukkaa $_FILES-kutsussa ja kutsut sitä jokaiselle tiedostolle. CodeIgniter 4 tukee useita latauksia suoraan getFileMultiple()-metodin kautta.

Ei. CodeIgniter 4 korvaa Upload-kirjaston Request file API:lla. Kutsutaan funktiota $this->request->getFile('field'), validoidaan se ja sitten käytetään funktiota move() tiedoston tallentamiseen erillisen latauskirjaston lataamisen sijaan.

Aseta $config['encrypt_name'] = TRUE antaaksesi jokaiselle tiedostolle satunnaisen nimen, tai aseta $config['file_name'] valitsemaasi arvoon. Tämä estää saman alkuperäisen nimen omaavien olemassa olevien tiedostojen päällekirjoittamisen.

Kyllä. Tekoäly voi luoda allowed_types-salauslistan, kokorajoitukset ja virheiden käsittelyn sekä ehdottaa lisätarkistuksia, kuten todellisen MIME-tyypin varmentamista. Testaa aina luodut säännöt oikeita tiedostoja vasten ennen käyttöönottoa.

Kyllä. Liitä virheilmoitus ja ohjaimesi, niin tekoäly voi paikantaa ongelmia, kuten puuttuvan moniosaisen lomakkeen, ei-kirjoitettavan upload_path-polun tai allowed_types-kohdasta puuttuvan laajennuksen, ja ehdottaa sitten korjausta.

Tiivistä tämä viesti seuraavasti: