Cara Upload Gambar & File di CodeIgniter (dengan Contoh)
Fiona Coklat
Unggah File CodeIgniter
Manajemen file sangat penting untuk sebagian besar aplikasi web. Jika Anda mengembangkan sistem manajemen konten, maka Anda harus dapat mengunggah gambar, dokumen word, laporan pdf, dll. Jika Anda bekerja di situs keanggotaan, Anda mungkin perlu menyiapkan orang untuk mengunggah profil mereka gambar-gambar. Kelas File Uploading CodeIgniter memudahkan kita melakukan semua hal di atas.
Dalam tutorial ini, kita akan melihat cara menggunakan perpustakaan unggah file untuk memuat file.
Mengunggah Gambar di CodeIgniter
Pengunggahan file masuk CodeIgniter memiliki dua bagian utama. Bagian depan dan belakang. Frontend ditangani oleh formulir HTML yang menggunakan file tipe input formulir. Di backend, pustaka unggahan file memproses masukan yang dikirimkan dari formulir dan menulisnya ke direktori unggahan.
Mari kita mulai dengan formulir masukan.
Buat direktori baru bernama file di direktori aplikasi/tampilan
Tambahkan file berikut di application/views/files
- upload_form.php – tampilan ini berisi formulir HTML yang memiliki tipe input file dan mengirimkan file yang dipilih ke server untuk diproses
- upload_result.php – tampilan ini menampilkan hasil gambar yang diupload termasuk link yang bisa kita klik untuk melihat hasilnya.
Tambahkan kode berikut ke 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>
SINI,
- if (isset($error)){…} memeriksa apakah variabel error telah disetel. Jika hasilnya benar maka kesalahan yang dikembalikan oleh perpustakaan unggahan akan ditampilkan kepada pengguna.
- jenis file memungkinkan pengguna menjelajahi komputer mereka dan memilih file untuk diunggah.
Tambahkan kode berikut ke 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>
SINI,
- menggunakan pembantu jangkar untuk membuat tautan ke file baru yang diunggah di direktori gambar. Nama tersebut diambil dari metadata gambar yang diteruskan ke tampilan ketika file berhasil diunggah.
Sekarang mari kita buat pengontrol yang akan merespons pengunggahan gambar kita
Tambahkan file baru ImageUploadController.php di aplikasi/pengontrol
Tambahkan kode berikut ke 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);
}
}
}
SINI,
- class ImageUploadController extends CI_Controller {…} mendefinisikan kelas pengontrol kita dan memperluas pengontrol dasar CI_Controller
- public function __construct() {…} menginisialisasi metode konstruktor induk dan memuat url dan form helper
- public function index() {…} mendefinisikan metode indeks yang digunakan untuk menampilkan formulir unggah gambar
- public function store() {…} mendefinisikan metode yang akan mengunggah gambar dan menyimpannya di server aplikasi web.
- $config['upload_path'] = './gambar/'; mengatur direktori tempat gambar harus diunggah
- $config['allowed_types'] = 'gif|jpg|png'; mendefinisikan ekstensi file yang dapat diterima. Ini penting untuk alasan keamanan. Jenis yang diizinkan memastikan hanya gambar yang diunggah dan jenis file lain seperti php tidak dapat diunggah karena berpotensi membahayakan server.
- $config['ukuran_maks'] = 2000; atur ukuran file maksimum dalam kilobyte. Dalam contoh kami, file maksimum yang dapat diunggah adalah 2,000kb, mendekati 2MB. Jika pengguna mencoba mengunggah file yang lebih besar dari 2,000kb, maka gambar akan gagal diunggah dan perpustakaan akan menampilkan pesan kesalahan.
- $config['max_width'] = 1500; menetapkan lebar maksimum gambar yang dalam kasus kami adalah 1,500 px. Lebar apa pun yang lebih besar dari itu akan menghasilkan kesalahan
- $config['max_height'] = 1500; mendefinisikan ketinggian maksimum yang dapat diterima.
- $ini->muat->perpustakaan('unggah', $config); memuat perpustakaan unggahan dan menginisialisasinya dengan array $config yang kita definisikan di atas.
- if (!$this->upload->do_upload('profile_image')) {…} mencoba mengunggah gambar yang dikirimkan yang dalam kasus kami diberi nama profile_image
- $kesalahan = array('kesalahan' => $ini->unggah->display_errors()); menyetel pesan kesalahan jika pengunggahan gagal
- $ini->muat->lihat('file/upload_form', $error); memuat formulir unggah file dan menampilkan pesan kesalahan yang dikembalikan dari perpustakaan unggahan
- $data = array('image_metadata' => $ini->unggah->data()); mengatur metadata gambar jika upload berhasil
- $ini->muat->lihat('file/hasil_unggah', $data); memuat tampilan yang berhasil diunggah dan meneruskan metadata file yang diunggah.
Itu saja untuk pengontrolnya. Sekarang mari buat direktori tempat gambar kita akan diunggah. Buat direktori baru “gambar” di direktori root aplikasi Anda
Terakhir, kami akan mengiklankan dua rute ke file rute.php kami yang akan menampilkan formulir dan menampilkan hasilnya
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
SINI,
- $route['upload-image'] = 'imageuploadcontroller'; mendefinisikan URL unggah-gambar yang memanggil metode indeks ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/toko'; mendefinisikan gambar penyimpanan URL yang menerima file pengguna yang dipilih dan mengunggahnya ke server.
Menguji aplikasi
Mari kita mulai server PHP bawaan
Buka terminal/baris perintah dan telusuri ke root aplikasi Anda. Dalam kasus saya, root terletak di drive C:\Sites\ci-app
cd C:\Sites\ci-app
mulai server menggunakan perintah berikut
php -S localhost:3000
Muat URL berikut di peramban web Anda: http://localhost:3000/upload-image
Anda akan dapat melihat hasil berikut ini
Klik pilih file
Anda seharusnya dapat melihat jendela dialog yang mirip dengan berikut ini
Pilih gambar yang Anda inginkan lalu klik buka
Nama file yang dipilih akan muncul pada form upload seperti terlihat pada gambar di atas. Klik pada tombol unggah gambar
Anda akan mendapatkan hasil berikut dengan asumsi semuanya berjalan dengan baik
Klik Lihat Gambar Saya! Tautan
Anda seharusnya dapat melihat gambar yang Anda unggah. Hasilnya akan mirip dengan berikut ini
Perhatikan nama gambar yang diunggah ditampilkan di URL. Kami mendapatkan nama gambar dari metadata gambar yang diunggah
Catatan: Proses Upload File tetap sama untuk jenis file lainnya
