Jak przesłać obraz i plik w CodeZapłonnik (z przykładem)

Przez: Fiona Brown Fiona Brown
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

CodeIgniter File Upload wykorzystuje wbudowaną bibliotekę Upload do przenoszenia obrazów i dokumentów z formularza HTML do katalogu na serwerze. Ten przykład tworzy formularz przesyłania, kontroler weryfikujący typ i rozmiar oraz stronę wyników potwierdzającą przesłanie.

  • 📁 Klasa podstawowa: Biblioteka Upload zajmuje się obsługą zaplecza polegającą na sprawdzaniu poprawności przesłanego pliku i zapisywaniu go w wybranym katalogu do przesyłania.
  • 🖼️ Dwie części: Do przesłania potrzebny jest formularz HTML z plikiem wejściowym oraz kontroler zaplecza, który przetwarza przesłanie.
  • 🔒 Wpisz białą listę: Konfiguracja permitted_types akceptuje tylko wymienione rozszerzenia, takie jak gif, jpg i png, blokując ryzykowne pliki, takie jak skrypty PHP.
  • 📏 Ograniczenia rozmiaru: Klucze max_size, max_width i max_height odrzucają pliki przekraczające limity i zwracają jasny komunikat o błędzie.
  • 📝 Kodowanie formularza: Formularz musi ustawić enctype na multipart/form-data, w przeciwnym razie wybrany plik nigdy nie dotrze do serwera.
  • 📄 Metadane wyników: W przypadku powodzenia upload->data() zwraca szczegóły pliku użyte do zbudowania łącza do nowo zapisanego obrazu.
  • 🤖 Asystent AI: Narzędzia AI mogą generować formularz przesyłania, reguły walidacji kontrolera i obsługę błędów, a następnie sprawdzać je pod kątem luk w zabezpieczeniach.
Czytaj więcej

CodePrzesyłanie pliku Igniter

CodePrzesyłanie pliku Igniter

Zarządzanie plikami jest niezbędne dla większości aplikacji internetowych. Jeśli jesteś programistąping Jeśli posiadasz system zarządzania treścią, musisz mieć możliwość przesyłania obrazów, dokumentów Word, raportów PDF i innych. Jeśli pracujesz nad witryną członkowską, możesz potrzebować umożliwić użytkownikom przesyłanie zdjęć profilowych. CodeKlasa Igniter File Uploading ułatwia nam wykonanie powyższych czynności.

W tym samouczku przyjrzymy się, jak używać biblioteki przesyłania plików do ładowania plików.

Przesyłanie obrazów w CodeZapalnik

Przesyłanie plików w CodeZapalnik Składa się z dwóch głównych części: frontendu i backendu. Frontend jest obsługiwany przez formularz HTML, który wykorzystuje plik typu danych wejściowych formularza. W backendzie biblioteka przesyłania plików przetwarza przesłane dane wejściowe z formularza i zapisuje je w katalogu przesyłania.

Zacznijmy od formularza wejściowego.

Utwórz nowy katalog o nazwie files w katalogu application/views.

Dodaj następujące pliki w application/views/files

  • upload_form.php – ten widok zawiera formularz HTML, który ma typ wejściowy pliku i przesyła wybrany plik do serwera w celu przetworzenia
  • upload_result.php – w tym widoku wyświetlane są wyniki przesłanego obrazu, w tym link, który można kliknąć, aby wyświetlić wyniki.

Dodaj następujący kod 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>

TUTAJ,

  • if (isset($error)){…} sprawdza, czy zmienna błędu została ustawiona. Jeśli wynik jest prawdziwy, błąd zwrócony przez bibliotekę upload jest wyświetlany użytkownikowi.
  • Plik typu pozwala użytkownikowi na przejście do swojego komputera i wybranie pliku do przesłania.
Nie przegap:

Dodaj następujący kod 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>

TUTAJ,

  • Używa funkcji pomocniczej „catch” do utworzenia linku do nowo przesłanego pliku w katalogu „images”. Nazwa jest pobierana z metadanych obrazu, które są przekazywane do widoku po pomyślnym przesłaniu pliku.

Utwórzmy teraz kontroler, który będzie reagował na przesyłanie obrazów.

Dodaj nowy plik ImageUploadController.php w aplikacji/kontrolery

Dodaj następujący kod 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);
}
}
 
}

TUTAJ,

  • class ImageUploadController rozszerza CI_Controller {…} definiuje naszą klasę kontrolera i rozszerza kontroler bazowy CI_Controller
  • funkcja publiczna __construct() {…} inicjuje metodę konstruktora nadrzędnego i ładuje pomoce adresu URL i formularza
  • funkcja publiczna indeks() {…} definiuje metodę indeksowania używaną do wyświetlenia formularza przesyłania obrazu
  • funkcja publiczna store() {…} definiuje metodę, która prześle obraz i zapisze go na serwerze aplikacji internetowej.
    • $config['upload_path'] = './images/'; ustawia katalog, do którego mają zostać przesłane obrazy
    • $config['allowed_types'] = 'gif|jpg|png'; definiuje dopuszczalne rozszerzenia plików. Jest to ważne ze względów bezpieczeństwa. Dozwolone typy gwarantują, że przesyłane są tylko obrazy, a inne typy plików, takie jak PHP, nie mogą być przesyłane, ponieważ mogą one zagrozić serwerowi.
    • $config['max_size'] = 2000; ustawia maksymalny rozmiar pliku w kilobajtach. W naszym przykładzie maksymalny rozmiar pliku, jaki można przesłać, to 2,000 KB, czyli blisko 2 MB. Jeśli użytkownik spróbuje przesłać plik większy niż 2,000 KB, przesłanie obrazu nie powiedzie się, a biblioteka zwróci komunikat o błędzie.
    • $config['max_width'] = 1500; ustawia maksymalną szerokość obrazu, która w naszym przypadku wynosi 1,500 pikseli. Większa szerokość spowoduje błąd.
    • $config['max_height'] = 1500; określa maksymalną dopuszczalną wysokość.
    • $this->load->library('upload', $config); ładuje bibliotekę przesyłania i inicjuje ją tablicą $config, którą zdefiniowaliśmy powyżej.
    • jeśli (!$this->upload->do_upload('profile_image')) {…} próbuje przesłać przesłany obraz, który w naszym przypadku nosi nazwę profile_image
    • $error = array('error' => $this->upload->display_errors()); ustawia komunikat o błędzie, jeśli przesyłanie nie powiedzie się
    • $this->load->view('files/upload_form', $error); ładuje formularz przesyłania pliku i wyświetla komunikat o błędzie zwrócony przez bibliotekę przesyłania
    • $data = array('image_metadata' => $this->upload->data()); ustawia metadane obrazu, jeśli przesyłanie zakończyło się pomyślnie
    • $this->load->view('files/upload_result', $data); ładuje przesłany widok i przekazuje metadane przesłanego pliku.

To wszystko, jeśli chodzi o kontroler. Teraz utwórzmy katalog, do którego będą przesyłane nasze obrazy. Utwórz nowy katalog „images” w katalogu głównym swojej aplikacji.

Na koniec dodamy dwie trasy do pliku routes.php, które będą wyświetlać formularz i wyniki.

Otwórz plik application/config/routes.php i dodaj następujące trasy

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

TUTAJ,

  • $route['upload-image'] = 'imageuploadcontroller'; definiuje URL upload-image, który wywołuje metodę index kontrolera ImageUploadController
  • $route['store-image'] = 'imageuploadcontroller/store'; definiuje URL store-image, który akceptuje wybrany plik użytkownika i przesyła go na serwer.

Jak naprawić częste CodeBłędy przesyłania plików Igniter

Większość błędów przesyłania zwraca jasny komunikat z biblioteki przesyłania. Poniższa lista zawiera zestawienie typowych błędów i ich rozwiązań.

  • Typ pliku, który próbujesz przesłać, jest niedozwolony: dodaj brakujące rozszerzenie do konfiguracji allowed_types, na przykład 'gif|jpg|png|pdf'.
  • Plik, który próbujesz przesłać, jest większy niż dozwolony rozmiar: podnieś max_size i sprawdź, czy upload_max_filesize i post_max_size w php.ini są wystarczająco duże.
  • Wygląda na to, że ścieżka przesyłania jest nieprawidłowa: utwórz katalog upload_path i upewnij się, że serwer WWW ma do niego uprawnienia zapisu.
  • Nie wybrano pliku do przesłania: sprawdź, czy nazwa wejściowa pasuje do argumentu do_upload() i czy formularz używa enctype multipart/form-data.

Testowanie aplikacji

Uruchommy wbudowany serwer PHP.

Otwórz terminal lub wiersz poleceń i przejdź do katalogu głównego swojej aplikacji. W moim przypadku katalog główny znajduje się na dysku C:\Sites\ci-app.

cd C:\Sites\ci-app

Uruchom serwer za pomocą następującego polecenia

php -S localhost:3000

Załaduj następujące URL w Twojej przeglądarce internetowej: http://localhost:3000/upload-image

Będziesz mógł zobaczyć następujące wyniki

Przesyłanie obrazów w CodeZapalnik

Kliknij wybierz plik

Powinno zostać wyświetlone okno dialogowe podobne do poniższego

Przesyłanie obrazów w CodeZapalnik

Wybierz żądany obraz, a następnie kliknij Otwórz

Przesyłanie obrazów w CodeZapalnik

Wybrana nazwa pliku pojawi się w formularzu przesyłania, jak pokazano na powyższym obrazku. Kliknij przycisk „Prześlij obraz”.

Zakładając, że wszystko pójdzie dobrze, otrzymasz następujące wyniki.

Przesyłanie obrazów w CodeZapalnik

Kliknij na link „Zobacz mój obraz!”

Powinieneś widzieć przesłany obraz. Rezultat będzie podobny do poniższego.

Przesyłanie obrazów w CodeZapalnik

Zwróć uwagę, że nazwa przesłanego obrazu jest wyświetlana w URLNazwę obrazu uzyskaliśmy z przesłanych metadanych obrazu.

Uwaga: Proces przesyłania pliku pozostaje taki sam dla innych typów plików.

FAQ

CodeBiblioteka Igniter 3 Upload obsługuje jeden plik na jedno wywołanie do_upload(), dlatego należy przejść pętlą przez $_FILES i wywołać tę funkcję dla każdego elementu. CodeIgniter 4 obsługuje wielokrotne przesyłanie bezpośrednio za pomocą metody getFileMultiple().

Nie. CodeIgniter 4 zastępuje bibliotekę Upload API żądaniem pliku. Wywołujesz $this->request->getFile('field'), weryfikujesz go, a następnie używasz move() do zapisania pliku, zamiast ładować osobną bibliotekę do przesyłania.

Ustaw $config['encrypt_name'] = TRUE, aby nadać każdemu plikowi losową nazwę, lub ustaw $config['file_name'] na wybraną przez siebie wartość. Zapobiegnie to nadpisywaniu istniejących plików o tej samej oryginalnej nazwie.

Tak. Sztuczna inteligencja może wygenerować białą listę dozwolonych typów, limity rozmiaru i obsługę błędów, a także zasugerować dodatkowe kontrole, takie jak weryfikacja rzeczywistego typu MIME. Zawsze testuj wygenerowane reguły na rzeczywistych plikach przed wdrożeniem.

Tak. Wklej komunikat o błędzie i kontroler, a AI zidentyfikuje problemy, takie jak brakujący formularz wieloczęściowy, niezapisywalna ścieżka przesyłania lub brak rozszerzenia w dozwolonych typach, i zasugeruje rozwiązanie.

Podsumuj ten post następująco: