CodeIgniter'a Resim ve Dosya Nasıl Yüklenir (Örnek ile)
Fiona Brown
CodeIgniter Dosya Yükleme
Dosya yönetimi çoğu web uygulaması için gereklidir. İçerik yönetim sistemi geliştiriyorsanız görsel, word belgesi, pdf raporu vb. yükleyebilmeniz gerekecektir. Üyelik sitesi üzerinde çalışıyorsanız kişilerin profillerini yüklemeleri için bir provizyon almanız gerekebilir. Görüntüler. CodeIgniter'ın Dosya Yükleme sınıfı yukarıdakilerin tümünü yapmamızı kolaylaştırır.
Bu eğitimde, dosyaları yüklemek için dosya yükleme kitaplığının nasıl kullanılacağına bakacağız.
CodeIgniter'a Görüntü Yükleme
Dosya yükleme CodeIgniter iki ana bölümü vardır. Ön uç ve arka uç. Ön uç, form giriş türü dosyasını kullanan HTML formu tarafından işlenir. Arka uçta, dosya yükleme kitaplığı formdan gönderilen girişi işler ve bunu yükleme dizinine yazar.
Giriş formuyla başlayalım.
Uygulama/görünümler dizininde dosyalar adı verilen yeni bir dizin oluşturun
Aşağıdaki dosyaları application/views/files'a ekleyin
- upload_form.php – bu görünüm, dosyanın giriş türünü içeren ve seçilen dosyayı işlenmek üzere sunucuya gönderen HTML formunu içerir
- upload_result.php – bu görünüm, yüklenen görselin sonuçlarını, sonuçları görüntülemek için tıklayabileceğimiz bir bağlantı da dahil olmak üzere görüntüler.
Aşağıdaki kodu upload_form.php'ye ekleyin
<!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>
İŞTE,
- if (isset($error)){…}, hata değişkeninin ayarlanıp ayarlanmadığını kontrol eder. Sonuç doğruysa, yükleme kitaplığının döndürdüğü hata kullanıcıya görüntülenir.
- tür dosyası, kullanıcının bilgisayarına göz atmasına ve yüklemek için bir dosya seçmesine olanak tanır.
Aşağıdaki kodu upload_result.php'ye ekleyin
<!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>
İŞTE,
- görüntüler dizinine yeni yüklenen dosyaya bir bağlantı oluşturmak için bağlantı yardımcısını kullanır. Ad, dosya başarıyla yüklendiğinde görünüme iletilen görüntü meta verisinden alınır.
Şimdi resim yüklememize cevap verecek kontrolcüsü oluşturalım.
Application/controllers'a yeni bir ImageUploadController.php dosyası ekleyin
Aşağıdaki kodu ImageUploadController.php'ye ekleyin
<?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);
}
}
}
İŞTE,
- ImageUploadController sınıfı CI_Controller'ı genişletir {…} denetleyici sınıfımızı tanımlar ve CI_Controller temel denetleyicisini genişletir
- public function __construct() {…} ana yapıcı yöntemini başlatır ve url'yi ve form yardımcılarını yükler
- public function index() {…}, resim yükleme formunu görüntülemek için kullanılan indeks yöntemini tanımlar
- public function store() {…}, görüntüyü yükleyecek ve web uygulama sunucusunda saklayacak yöntemi tanımlar.
- $config['upload_path'] = './images/'; görüntülerin yükleneceği dizini ayarlar
- $config['allowed_types'] = 'gif|jpg|png'; kabul edilebilir dosya uzantılarını tanımlar. Bu güvenlik nedeniyle önemlidir. İzin verilen türler, yalnızca görsellerin yüklenmesini ve php gibi diğer dosya türlerinin sunucuyu tehlikeye atma potansiyeline sahip olması nedeniyle yüklenememesini sağlar.
- $config['max_size'] = 2000; maksimum dosya boyutunu kilobayt cinsinden ayarlayın. Örneğimizde yüklenebilecek maksimum dosya 2,000kb, yani 2MB'tır. Kullanıcı 2,000 kb'den büyük bir dosyayı yüklemeye çalışırsa görsel yüklenemeyecektir ve kitaplık bir hata mesajı döndürecektir.
- $config['max_width'] = 1500; bizim durumumuzda 1,500 piksel olan görüntünün maksimum genişliğini ayarlar. Bundan daha büyük herhangi bir genişlik hatayla sonuçlanır
- $config['max_height'] = 1500; kabul edilebilir maksimum yüksekliği tanımlar.
- $this->load->library('yükleme', $yapılandırma); yükleme kütüphanesini yükler ve onu yukarıda tanımladığımız $config dizisiyle başlatır.
- if (!$this->upload->do_upload('profile_image')) {…}, bizim durumumuzda profile_image olarak adlandırılan gönderilen resmi yüklemeye çalışırsa
- $hata = dizi('hata' => $this->upload->display_errors()); yükleme başarısız olursa hata mesajını ayarlar
- $this->load->view('dosyalar/upload_form', $hata); dosya yükleme formunu yükler ve yükleme kitaplığından döndürülen hata mesajını görüntüler
- $veri = array('image_metadata' => $this->upload->data()); yükleme başarılıysa görsel meta verilerini ayarlar
- $this->load->view('dosyalar/upload_result', $veri); yüklenen başarıyla görünümü yükler ve yüklenen dosya meta verilerini iletir.
Kontrolör için bu kadar. Şimdi görsellerimizin yükleneceği dizini oluşturalım. Uygulamanızın kök dizininde yeni bir “images” dizini oluşturun
Son olarak, Routes.php dosyamıza formu görüntüleyecek ve sonuçları görüntüleyecek iki rota ekleyeceğiz.
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
İŞTE,
- $route['upload-image'] = 'imageuploadcontroller'; ImageUploadController'ın indeks yöntemini çağıran URL yükleme görüntüsünü tanımlar
- $route['store-image'] = 'imageuploadcontroller/store'; seçilen kullanıcı dosyasını kabul eden ve sunucuya yükleyen URL mağaza görüntüsünü tanımlar.
Uygulamayı test etme
Yerleşik PHP sunucusunu başlatalım
Terminal/komut satırını açın ve uygulamanızın köküne göz atın. Benim durumumda kök C:\Sites\ci-app sürücüsünde bulunuyor
cd C:\Sites\ci-app
Aşağıdaki komutu kullanarak sunucuyu başlatın
php -S localhost:3000
Aşağıdaki URL'yi web tarayıcınıza yükleyin: http://localhost:3000/upload-image
Aşağıdaki sonuçları görebileceksiniz
Dosya seç'e tıklayın
Aşağıdakine benzer bir iletişim penceresi görebilmeniz gerekir
İstediğiniz görseli seçin ve aç'a tıklayın
Seçilen dosya adı, yukarıdaki resimde gösterildiği gibi form yüklemesinde görünecektir. Bir resim yükle düğmesine tıklayın
Her şeyin yolunda gittiğini varsayarsak aşağıdaki sonuçları elde edeceksiniz
Resmimi Görüntüle'ye tıklayın! Bağlantı
Yüklediğiniz resmi görebilmeniz gerekir. Sonuçlar aşağıdakine benzer olacaktır
Yüklenen görselin adının URL'de görüntülendiğine dikkat edin. Resim adını, yüklenen resim meta verisinden aldık
Not: Dosya Yükleme işlemi diğer dosya türleri için aynı kalır
