Kako prenijeti sliku i datoteku u CodeUpaljač (s primjerom)

⚡ Pametni sažetak

CodeIgniter File Upload koristi ugrađenu biblioteku za prijenos slika i dokumenata iz HTML obrasca u direktorij poslužitelja. Ovaj primjer izrađuje obrazac za prijenos, kontroler koji provjerava vrstu i veličinu te stranicu s rezultatima koja potvrđuje prijenos.

📁 Osnovni razred: Biblioteka za prijenos obavlja pozadinski posao validacije poslane datoteke i njenog zapisivanja u odabrani direktorij za prijenos.
🖼️ Dva dijela: Za prijenos je potreban HTML obrazac na prednjem dijelu s ulaznom datotekom i pozadinski kontroler koji obrađuje slanje.
🔒 Bijela lista za tip: Konfiguracija allowed_types prihvaća samo navedene ekstenzije kao što su gif, jpg i png, blokirajući rizične datoteke poput PHP skripti.
📏 Ograničenja veličine: Ključevi max_size, max_width i max_height odbacuju datoteke koje prelaze ograničenja i vraćaju jasnu poruku o pogrešci.
📝 Kodiranje obrasca: Obrazac mora postaviti enctype na multipart/form-data, inače odabrana datoteka nikada neće stići do poslužitelja.
📄 Metapodaci rezultata: U slučaju uspjeha, upload->data() vraća detalje datoteke korištene za izgradnju veze do novo pohranjene slike.
🤖 AI pomoć: Alati umjetne inteligencije mogu generirati obrazac za prijenos, pravila validacije kontrolera i rukovanje pogreškama, a zatim ih pregledati zbog sigurnosnih propusta.

Pročitaj više

CodePrijenos datoteke za paljenje

Upravljanje datotekama je ključno za većinu web aplikacija. Ako ste razvojniping sustav za upravljanje sadržajem, tada ćete morati moći prenositi slike, Word dokumente, PDF izvješća i još mnogo toga. Ako radite na web-mjestu za članstvo, možda ćete morati omogućiti ljudima da prenose svoje profilne slike. CodeKlasa za učitavanje datoteka Igniter olakšava nam sve navedeno.

U ovom vodiču ćemo pogledati kako koristiti biblioteku za učitavanje datoteka za učitavanje datoteka.

Prijenos slika u Codeupaljač

Prijenos datoteke u Codeupaljač ima dva glavna dijela: frontend i backend. Frontendom upravlja HTML obrazac koji koristi datoteku tipa unosa obrasca. Na backendu, biblioteka za prijenos datoteka obrađuje poslani unos iz obrasca i zapisuje ga u direktorij za prijenos.

Krenimo s obrascem za unos.

U direktoriju application/views stvorite novi direktorij pod nazivom files.

Dodajte sljedeće datoteke u aplikaciju/views/files

upload_form.php – ovaj prikaz sadrži HTML formu koja ima ulazni tip datoteke i šalje odabranu datoteku poslužitelju na obradu
upload_result.php – ovaj prikaz prikazuje rezultate prenesene slike, uključujući poveznicu na koju možemo kliknuti za pregled rezultata.

Dodajte sljedeći kod u 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>

OVDJE,

Funkcija (isset($error)){…} provjerava je li varijabla pogreške postavljena. Ako je rezultat istinit, korisniku se prikazuje pogreška koju je vratila biblioteka za prijenos.
Tip datoteke omogućuje korisniku da pregleda svoje računalo i odabere datoteku za prijenos.

Dodajte sljedeći kod u 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>

OVDJE,

koristi pomoćno sredstvo sidra za stvaranje poveznice na novo prenesenu datoteku u direktoriju slika. Naziv se dohvaća iz metapodataka slike koji se prosljeđuju prikazu kada je datoteka uspješno prenesena.

Sada kreirajmo kontroler koji će reagirati na učitavanje naše slike.

Dodajte novu datoteku ImageUploadController.php u Application/controllers

Dodajte sljedeći kod u 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);
}
}
 
}

OVDJE,

klasa ImageUploadController proširuje CI_Controller {…} definira našu klasu kontrolera i proširuje osnovni kontroler CI_Controller
javna funkcija __construct() {…} inicijalizira nadređenu metodu konstruktora i učitava url i pomoćnike obrazaca
javna funkcija index() {…} definira metodu indeksa koja se koristi za prikaz obrasca za učitavanje slike
javna funkcija store() {…} definira metodu koja će učitati sliku i pohraniti je na poslužitelju web aplikacija.
- $config['upload_path'] = './images/'; postavlja direktorij u koji se slike trebaju učitavati
- $config['allowed_types'] = 'gif|jpg|png'; definira prihvatljive ekstenzije datoteka. To je važno iz sigurnosnih razloga. Dopuštene vrste osiguravaju da se prenose samo slike, a druge vrste datoteka poput PHP-a ne mogu se prenositi jer mogu ugroziti poslužitelj.
- $config['max_size'] = 2000; postavlja maksimalnu veličinu datoteke u kilobajtima. U našem primjeru, maksimalna datoteka koja se može prenijeti je 2,000 kb, što je blizu 2 MB. Ako korisnik pokuša prenijeti datoteku veću od 2,000 kb, slika se neće prenijeti i biblioteka će vratiti poruku o pogrešci.
- $config['max_width'] = 1500; postavlja maksimalnu širinu slike, koja je u našem slučaju 1,500 px. Bilo koja širina veća od toga rezultira pogreškom.
- $config['max_height'] = 1500; definira maksimalnu prihvatljivu visinu.
- $this->load->library('upload', $config); učitava biblioteku za učitavanje i inicijalizira je s nizom $config koji smo gore definirali.
- ako (!$this->upload->do_upload('profile_image')) {…} pokuša prenijeti poslanu sliku, koja se u našem slučaju zove profile_image
- $greška = niz('greška' => $ovo->upload->display_errors()); postavlja poruku o pogrešci ako učitavanje ne uspije
- $this->load->view('files/upload_form', $error); učitava obrazac za učitavanje datoteke i prikazuje poruku o pogrešci koja se vraća iz biblioteke za učitavanje
- $data = array('image_metadata' => $this->upload->data()); postavlja metapodatke slike ako je prijenos bio uspješan
- $this->load->view('files/upload_result', $data); učitava uspješno učitani prikaz i prosljeđuje metapodatke učitane datoteke.

To je to što se tiče kontrolera. Sada stvorimo direktorij u koji će se prenositi naše slike. Izradite novi direktorij "images" u korijenskom direktoriju vaše aplikacije.

Na kraju ćemo u našu routes.php datoteku dodati dvije rute koje će prikazati obrazac i rezultate.

Otvorite application/config/routes.php i dodajte sljedeće rute

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

OVDJE,

$route['upload-image'] = 'imageuploadcontroller'; definira URL upload-image koja poziva metodu index klase ImageUploadController
$route['store-image'] = 'imageuploadcontroller/store'; definira URL store-image koja prihvaća odabranu korisničku datoteku i prenosi je na poslužitelj.

Kako popraviti Common CodePogreške pri prijenosu datoteke Igniter

Većina neuspjelih prijenosa vraća jasnu poruku iz biblioteke prijenosa. Popis u nastavku prikazuje uobičajene pogreške i njihova rješenja.

Vrsta datoteke koju pokušavate prenijeti nije dopuštena: dodajte nedostajuću ekstenziju u konfiguraciju allowed_types, na primjer 'gif|jpg|png|pdf'.
Datoteka koju pokušavate prenijeti veća je od dopuštene veličine: Povećajte max_size i provjerite jesu li upload_max_filesize i post_max_size u php.ini dovoljno veliki.
Putanja za prijenos izgleda nije valjana: stvorite direktorij upload_path i provjerite ima li web poslužitelj dopuštenje za pisanje u njemu.
Niste odabrali datoteku za prijenos: Provjerite odgovara li naziv ulaza argumentu do_upload() i koristi li obrazac enctype multipart/form-data.

Testiranje aplikacije

Pokrenimo ugrađeni PHP poslužitelj.

Otvorite terminal ili naredbeni redak i idite do korijenske mape vaše aplikacije. U mom slučaju, korijenska mapa se nalazi na disku C:\Sites\ci-app

cd C:\Sites\ci-app

Pokrenite poslužitelj pomoću sljedeće naredbe

php -S localhost:3000

Učitajte sljedeće URL u vašem web pregledniku: http://localhost:3000/upload-image

Moći ćete vidjeti sljedeće rezultate

Kliknite na odabir datoteke

Trebali biste moći vidjeti dijaloški prozor sličan sljedećem

Odaberite željenu sliku, a zatim kliknite na otvori

Odabrani naziv datoteke prikazat će se u obrascu za prijenos kao što je prikazano na gornjoj slici. Kliknite gumb Prenesi sliku.

Dobit ćete sljedeće rezultate, pod pretpostavkom da sve prođe dobro.

Kliknite na poveznicu Pogledaj moju sliku!

Trebali biste moći vidjeti sliku koju ste prenijeli. Rezultati će biti slični sljedećima.

Primijetite da se naziv prenesene slike prikazuje u URLNaziv slike dobili smo iz prenesenih metapodataka slike.

Napomena: Postupak prijenosa datoteka ostaje isti za ostale vrste datoteka.

Pitanja i odgovori

The CodeBiblioteka za upload Igniter 3 obrađuje jednu datoteku po pozivu do_upload(), pa se petlja proteže preko $_FILES i poziva za svaku stavku. CodeIgniter 4 podržava višestruke prijenose izravno putem metode getFileMultiple().

Ne. CodeIgniter 4 zamjenjuje biblioteku za prijenos s API-jem zahtjeva za datoteku. Pozivate $this->request->getFile('field'), validirate ga, a zatim koristite move() za pohranu datoteke, umjesto učitavanja zasebne biblioteke za prijenos.

Postavite $config['encrypt_name'] = TRUE da biste svakoj datoteci dali nasumično ime ili postavite $config['file_name'] na vrijednost koju odaberete. To sprječava prepisivanje postojećih datoteka koje dijele isto izvorno ime.

Da. Umjetna inteligencija može generirati bijelu listu allowed_types, ograničenja veličine i rukovanje pogreškama te predložiti dodatne provjere poput provjere stvarnog MIME tipa. Uvijek testirajte generirana pravila u odnosu na stvarne datoteke prije implementacije.

Da. Zalijepite poruku o pogrešci i svoj kontroler, a umjetna inteligencija može uočiti probleme poput nedostajućeg višedijelnog obrasca, putanje_za_pisanje ili proširenja koje nedostaje u dopuštenim_tipovima, a zatim predložiti ispravak.

Kako prenijeti sliku i datoteku u CodeUpaljač (s primjerom)

CodePrijenos datoteke za paljenje

Prijenos slika u Codeupaljač

Kako popraviti Common CodePogreške pri prijenosu datoteke Igniter

Testiranje aplikacije

Pitanja i odgovori

Sažmite ovu objavu uz:

Prijavite se za bilten

CodePrijenos datoteke za paljenje

Prijenos slika u Codeupaljač

POVEZANI ČLANCI

Kako popraviti Common CodePogreške pri prijenosu datoteke Igniter

Testiranje aplikacije

Pitanja i odgovori

Sažmite ovu objavu uz:

Prijavite se za bilten