Cara Mengunggah Gambar & File di CodePemantik Api (dengan Contoh)

CodeUnggahan File Igniter

Manajemen file sangat penting untuk sebagian besar aplikasi web. Jika Anda seorang pengembang...ping Jika Anda menggunakan sistem manajemen konten, Anda perlu dapat mengunggah gambar, dokumen Word, laporan PDF, dan lainnya. Jika Anda mengerjakan situs keanggotaan, Anda mungkin perlu menyediakan fitur bagi orang-orang untuk mengunggah gambar profil mereka. CodeKelas Pengunggahan File Igniter memudahkan kita untuk melakukan semua hal di atas.

Dalam tutorial ini, kita akan melihat cara menggunakan perpustakaan unggah file untuk memuat file.

Mengunggah Gambar di CodeAlat penyala

Pengunggahan file masuk CodeAlat penyala Terdiri dari dua bagian utama: frontend dan backend. Frontend ditangani oleh formulir HTML yang menggunakan tipe input formulir `file`. Di backend, pustaka unggahan file memproses input yang dikirimkan dari formulir dan menuliskannya ke direktori unggahan.

Mari kita mulai dengan formulir input.

Buat direktori baru bernama files di dalam direktori application/views.

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 unggahan gambar, termasuk tautan yang dapat 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(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>

SINI,

• if (isset($error)){…} memeriksa apakah variabel error telah diatur. Jika hasilnya benar, maka error yang dikembalikan oleh library unggahan akan ditampilkan kepada pengguna.
• Opsi "type file" memungkinkan pengguna untuk menelusuri 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 helper anchor untuk membuat tautan ke file yang baru diunggah di direktori gambar. Nama file diambil dari metadata gambar yang diteruskan ke tampilan saat file berhasil diunggah.

Sekarang mari kita buat controller 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 diperbolehkan. Ini penting untuk alasan keamanan. Jenis yang diperbolehkan memastikan bahwa hanya gambar yang diunggah dan jenis file lain seperti PHP tidak dapat diunggah, karena berpotensi membahayakan server.
  • $config['max_size'] = 2000; mengatur ukuran file maksimum dalam kilobyte. Dalam contoh kita, file maksimum yang dapat diunggah adalah 2,000kb, mendekati 2MB. Jika pengguna mencoba mengunggah file yang lebih besar dari 2,000kb, maka pengunggahan gambar akan gagal dan pustaka akan menampilkan pesan kesalahan.
  • $config['max_width'] = 1500; mengatur lebar maksimum gambar, yang dalam kasus kita 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.
  • jika (!$this->upload->do_upload('profile_image')) {…} mencoba mengunggah gambar yang dikirimkan, yang dalam kasus kita bernama 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.

Demikianlah bagian controller. Sekarang mari kita buat direktori tempat gambar kita akan diunggah. Buat direktori baru bernama “images” di direktori root aplikasi Anda.

Terakhir, kita akan menambahkan dua rute ke file routes.php kita yang akan menampilkan formulir dan menampilkan hasilnya.

Buka application/config/routes.php dan tambahkan rute-rute berikut.

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

SINI,

• $route['upload-image'] = 'imageuploadcontroller'; mendefinisikan URL upload-image yang memanggil metode index dari ImageUploadController
• $route['store-image'] = 'imageuploadcontroller/store'; mendefinisikan URL store-image yang menerima file pengguna yang dipilih dan mengunggahnya ke server.

Cara Memperbaiki Umum CodeKesalahan Unggahan File Igniter

Sebagian besar kegagalan unggahan akan menampilkan pesan yang jelas dari pustaka Unggahan. Daftar di bawah ini memetakan kesalahan umum beserta solusinya.

• Jenis file yang Anda coba unggah tidak diizinkan: Tambahkan ekstensi yang hilang ke konfigurasi allowed_types, misalnya 'gif|jpg|png|pdf'.
• Ukuran file yang Anda coba unggah melebihi ukuran yang diizinkan: Tingkatkan max_size, dan pastikan upload_max_filesize dan post_max_size di php.ini cukup besar.
• Jalur unggahan tampaknya tidak valid: Buat direktori upload_path dan pastikan server web memiliki izin tulis pada direktori tersebut.
• Anda belum memilih file untuk diunggah: Periksa apakah nama input sesuai dengan argumen do_upload() dan apakah formulir menggunakan enctype multipart/form-data.

Menguji aplikasi

Mari kita mulai server PHP bawaan.

Buka terminal atau baris perintah dan arahkan ke direktori utama aplikasi Anda. Dalam kasus saya, direktori utamanya terletak di drive C:\Sites\ci-app

cd C:\Sites\ci-app

Mulai server menggunakan perintah berikut

php -S localhost:3000

Muat yang berikut ini URL 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 di formulir unggah seperti yang ditunjukkan pada gambar di atas. Klik tombol Unggah Gambar.

Anda akan mendapatkan hasil berikut, dengan asumsi semuanya berjalan lancar.

Klik tautan Lihat Gambar Saya!

Anda seharusnya dapat melihat gambar yang telah Anda unggah. Hasilnya akan mirip dengan berikut ini.

Perhatikan bahwa nama gambar yang diunggah ditampilkan di URLKami mendapatkan nama gambar dari metadata gambar yang diunggah.

Catatan: Proses pengunggahan file tetap sama untuk jenis file lainnya.

Pertanyaan Umum Demo Slot