Як завантажити зображення та файл у CodeЗапальник (з прикладом)
Фіона Браун
⚡ Розумний підсумок
CodeIgniter File Upload використовує вбудовану бібліотеку Upload для переміщення зображень та документів з HTML-форми до каталогу сервера. У цьому прикладі створюється форма завантаження, контролер, який перевіряє тип та розмір, і сторінка результатів, що підтверджує завантаження.
CodeЗавантаження файлу запалювача
Керування файлами є важливим для більшості веб-застосунків. Якщо ви розробникping система керування контентом, тоді вам потрібно буде мати можливість завантажувати зображення, документи Word, звіти PDF тощо. Якщо ви працюєте над сайтом членства, вам може знадобитися передбачити можливість для людей завантажувати зображення своїх профілів. CodeКлас завантаження файлів Igniter дозволяє нам легко виконувати все вищезазначене.
У цьому посібнику ми розглянемо, як використовувати бібліотеку для завантаження файлів.
Завантаження зображень у CodeЗапалювач
Завантаження файлу в CodeЗапалювач має дві основні частини: фронтенд та серверну частину. Фронтенд обробляється HTML-формою, яка використовує файл типу вхідних даних форми. На серверній частині бібліотека завантаження файлів обробляє надіслані вхідні дані з форми та записує їх у каталог завантаження.
Почнемо з форми введення.
Створіть новий каталог з назвою files у каталозі application/views.
Додайте наступні файли в додаток/перегляди/файли
- upload_form.php – це представлення містить HTML-форму, яка має тип введення файлу та надсилає вибраний файл на сервер для обробки
- upload_result.php – цей перегляд відображає результати завантаженого зображення, включаючи посилання, за яким можна перейти для перегляду результатів.
Додайте наступний код до 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>
ТУТ,
- if (isset($error)){…} перевіряє, чи встановлено змінну error. Якщо результат істина, то помилка, повернута бібліотекою завантаження, відображається користувачеві.
- Файл типу дозволяє користувачеві перейти на свій комп’ютер і вибрати файл для завантаження.
Додайте наступний код до 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>
ТУТ,
- використовує допоміжний метод anchor для створення посилання на щойно завантажений файл у каталозі зображень. Назва отримується з метаданих зображення, які передаються до представлення після успішного завантаження файлу.
Давайте тепер створимо контролер, який реагуватиме на завантаження нашого зображення.
Додайте новий файл ImageUploadController.php у додаток/контролери
Додайте наступний код до 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); } } }
ТУТ,
- class ImageUploadController extends CI_Controller {…} визначає наш клас контролера та розширює базовий контролер CI_Controller
- публічна функція __construct() {…} ініціалізує метод батьківського конструктора та завантажує URL-адресу та помічники форми
- public function index() {…} визначає метод індексу, який використовується для відображення форми завантаження зображення
- public function store() {…} визначає метод, який завантажуватиме зображення та зберігатиме його на сервері веб-додатків.
- $config['upload_path'] = './images/'; встановлює каталог, куди мають бути завантажені зображення
- $config['allowed_types'] = 'gif|jpg|png'; визначає допустимі розширення файлів. Це важливо з міркувань безпеки. Дозволені типи гарантують, що завантажуються лише зображення, а інші типи файлів, такі як PHP, не можуть бути завантажені, оскільки вони можуть скомпрометувати сервер.
- $config['max_size'] = 2000; встановлює максимальний розмір файлу в кілобайтах. У нашому прикладі максимальний розмір файлу, який можна завантажити, становить 2,000 КБ, що близько 2 МБ. Якщо користувач спробує завантажити файл розміром більше 2,000 КБ, зображення не вдасться завантажити, і бібліотека поверне повідомлення про помилку.
- $config['max_width'] = 1500; встановлює максимальну ширину зображення, яка в нашому випадку становить 1,500 пікселів. Будь-яка більша ширина призведе до помилки.
- $config['max_height'] = 1500; визначає максимально допустиму висоту.
- $this->load->library('upload', $config); завантажує бібліотеку завантаження та ініціалізує її масивом $config, який ми визначили вище.
- якщо (!$this->upload->do_upload('profile_image')) {…} намагається завантажити надіслане зображення, яке в нашому випадку має назву profile_image
- $error = array('error' => $this->upload->display_errors()); встановлює повідомлення про помилку, якщо завантаження не вдається
- $this->load->view('files/upload_form', $error); завантажує форму завантаження файлу та відображає повідомлення про помилку, яке повертає бібліотека завантаження
- $data = array('image_metadata' => $this->upload->data()); встановлює метадані зображення, якщо завантаження було успішним
- $this->load->view('files/upload_result', $data); завантажує успішно завантажене подання та передає метадані завантаженого файлу.
На цьому з контролером все. Тепер створимо каталог, куди будуть завантажені наші зображення. Створіть новий каталог «images» у кореневому каталозі вашої програми.
Нарешті, ми додамо два маршрути до нашого файлу routes.php, які відображатимуть форму та результати.
Відкрийте application/config/routes.php та додайте наступні маршрути
$route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
ТУТ,
- $route['upload-image'] = 'imageuploadcontroller'; визначає URL upload-image, який викликає метод index ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/store'; визначає URL store-image, який приймає вибраний файл користувача та завантажує його на сервер.
Як виправити Common CodeПомилки завантаження файлу Igniter
Більшість помилок завантаження повертають чітке повідомлення з бібліотеки завантажень. У наведеному нижче списку зіставлено поширені помилки з їх виправленнями.
- Тип файлу, який ви намагаєтеся завантажити, заборонений: додайте відсутнє розширення до конфігурації allowed_types, наприклад, 'gif|jpg|png|pdf'.
- Файл, який ви намагаєтеся завантажити, перевищує дозволений розмір: підвищте max_size та переконайтеся, що upload_max_filesize та post_max_size у php.ini достатньо великі.
- Шлях завантаження, схоже, недійсний: створіть каталог upload_path та переконайтеся, що веб-сервер має до нього дозвіл на запис.
- Ви не вибрали файл для завантаження: Перевірте, чи ім'я вхідного поля відповідає аргументу do_upload() та чи форма використовує тип enctype multipart/form-data.
Тестування програми
Давайте запустимо вбудований PHP-сервер.
Відкрийте термінал або командний рядок і перейдіть до кореневого каталогу вашої програми. У моєму випадку кореневий каталог знаходиться на диску C:\Sites\ci-app
cd C:\Sites\ci-app
Запустіть сервер за допомогою наступної команди
php -S localhost:3000
Завантажте наступне URL у вашому веббраузері: http://localhost:3000/upload-image
Ви зможете побачити наступні результати
Натисніть вибрати файл
Ви повинні побачити діалогове вікно, схоже на наведене нижче
Виберіть потрібне зображення, а потім натисніть кнопку «Відкрити»
Вибране ім'я файлу відобразиться у формі завантаження, як показано на зображенні вище. Натисніть кнопку «Завантажити зображення».
Ви отримаєте такі результати, якщо все пройде добре.
Натисніть на посилання «Переглянути моє зображення!»
Ви маєте побачити завантажене зображення. Результати будуть подібними до наведених нижче.
Зверніть увагу, що назва завантаженого зображення відображається в URLМи отримали назву зображення з метаданих завантаженого зображення.
Примітка: Процес завантаження файлів залишається таким самим для інших типів файлів.
