Jak przesłać obraz i plik do CodeIgniter (z przykładem)

Przez: Fiona Brown Fiona Brown
Hours Zaktualizowano

Przesyłanie pliku CodeIgniter

Zarządzanie plikami jest niezbędne w większości aplikacji internetowych. Jeśli opracowujesz system zarządzania treścią, będziesz musiał mieć możliwość przesyłania obrazów, dokumentów Word, raportów w formacie PDF itp. Jeśli pracujesz na stronie członkowskiej, być może będziesz musiał uwzględnić możliwość przesyłania swoich profili obrazy. Klasa przesyłania plików CodeIgnitera ułatwia nam wykonanie wszystkich 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 CodeIgniter

Przesyłanie plików w CodeIgniter ma dwie główne części. Frontend i backend. Frontend jest obsługiwany przez formularz HTML, który wykorzystuje plik typu wejściowego formularza. Na zapleczu 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 – ten widok wyświetla wyniki przesłanego obrazu wraz z linkiem, który możemy 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('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>

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 umożliwia użytkownikowi przejście do komputera i wybranie pliku do przesłania.

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 pomocy kotwicy do utworzenia łącza do nowo przesłanego pliku w katalogu obrazów. Nazwa jest pobierana z metadanych obrazu przekazywanych do widoku po pomyślnym przesłaniu pliku.

Stwórzmy teraz kontroler, który będzie reagował na przesyłanie przez nas obrazu

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'; określa dopuszczalne rozszerzenia plików. Jest to ważne ze względów bezpieczeństwa. Dozwolone typy zapewniają, że przesyłane są tylko obrazy, a inne typy plików, takie jak php, nie mogą być przesyłane, ponieważ mogą potencjalnie zagrozić serwerowi.
    • $config['max_size'] = 2000; ustaw maksymalny rozmiar pliku w kilobajtach. W naszym przykładzie maksymalny plik, który można przesłać, to 2,000 KB, czyli około 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 px. Każda szerokość większa niż ta powoduje 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.
    • if (!$this->upload->do_upload('profile_image')) {…} próbuje przesłać przesłany obraz, który w naszym przypadku nosi nazwę obraz_profilu
    • $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 tyle, jeśli chodzi o kontroler. Stwórzmy teraz katalog, do którego będą przesyłane nasze obrazy. Utwórz nowy katalog „images” w katalogu głównym aplikacji

Na koniec dodamy dwie trasy do naszego pliku Routes.php, który wyświetli formularz i wyświetli wyniki

Open application/config/routes.php
Add the following routes
$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

TUTAJ,

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

Testowanie aplikacji

Uruchommy wbudowany serwer PHP

Otwórz terminal/wiersz poleceń i przejdź do katalogu głównego 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

Wczytaj następujący adres URL do swojej przeglądarki internetowej: http://localhost:3000/upload-image

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

Przesyłanie obrazów w CodeIgniter

Kliknij wybierz plik

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

Przesyłanie obrazów w CodeIgniter

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

Przesyłanie obrazów w CodeIgniter

Wybrana nazwa pliku pojawi się w formularzu przesyłania, jak pokazano na powyższym obrazku. Kliknij przycisk przesyłania obrazu

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

Przesyłanie obrazów w CodeIgniter

Kliknij opcję Wyświetl mój obraz! Połączyć

Powinieneś móc zobaczyć obraz, który przesłałeś. Wyniki będą podobne do następujących

Przesyłanie obrazów w CodeIgniter

Zauważ, że nazwa przesłanego obrazu jest wyświetlana w adresie URL. Nazwę obrazu uzyskaliśmy z metadanych przesłanego obrazu

POWIĄZANE ARTYKUŁY

Uwaga: proces przesyłania plików pozostaje taki sam w przypadku innych typów plików

Podsumuj ten post następująco: