Bu yazımda sizlere Codeigniter ve Jquery ile nasıl sayfa yenilemeden çoklu resim upload edildiğini anlatacağım. Bunun için Codeigniter frameworkünün "upload" kütüphanesini ve Jquery Form eklentisini kullanacağız. Ayrıca resimlerin yüklenme durumunu yüzde olarak gösteren progress bar için de bootstrap kullanacağız.

Jquery Form eklentisini aşağıdaki linkten indirebilirsiniz;
https://github.com/malsup/form

Ayrıca dökümantasyon ve ayrıntılı örnekler için BURAYI ziyaret edebilirsiniz.

İlk olarak application/controller dizini içerisinde "Resimeler.php" adında bir dosya oluşturuyoruz ve aşağıdaki kodları ekliyoruz;

defined('BASEPATH') OR exit('No direct script access allowed');

class Resimler extends CI_Controller {
	
	function __construct()
	{
		parent::__construct();
	}
	
	public function index()
	{
		$this->load->view('resimler_view.php');
	}
	
}

 

Şimdi de application/view dizini içinde "resimler_view.php" adında bir dosya yaratıp html içeriğimizi oluşturuyoruz;

<!doctype html>
<html>
	<head>
		<title>Codeigniter ve Jquery ile Çoklu Resim Upload</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="http://malsup.github.io/min/jquery.form.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$("#myForm").ajaxForm({
				beforeSend:function(){
					$(".progress").show();
				},
				uploadProgress:function(event,position,total,percentComplete){
					$(".progress-bar").width(percentComplete + '%');
					$(".progress-bar").html(percentComplete + '%');
				},
				success:function(){
					$(".progress").hide();
				},
				complete:function(response){
					$('.image').html(response.responseText);
				}
			});
			$(".progress").hide();
		});
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="span12">
					<form action="<?php echo base_url('resimler/upload'); ?>" method="post" id="myForm" enctype="multipart/form-data">
						<p><input type="file" name="resim[]" id="userfile" multiple></p>
						<p><button class="btn btn-default"><i class="fa fa-upload"></i> Resimleri Yükle</button></p>
					</form>
					<div class="image"></div>
				</div>
			</div>
			<div class="row">
				<div class="span12">
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Yukarıdaki kodda önce sayfamıza bootstrap.min.css dosyamızı, jquery ve jquery form eklentisini dahil ettik. Daha sonra formumuzu gönderecek olan ajax fonksiyonunu yazdık. Son olarak da formumuzu oluşturduk.

Bundan sonrası resimlerimizi upload edecek olan methodumuzu yazmak. Bunun için Resimler.php controller dosyamıza aşağıdaki kodları ekliyoruz;

public function upload()
{
	$this->load->library('upload');

	// Upload Ayarları
	$upload_conf = [
		'upload_path'   => './assets/images/',
		'allowed_types' => 'jpg|jpeg|png|gif',
		'max_size'      => '2048'
	];

	$this->upload->initialize($upload_conf);

	if($_FILES) {
		// Dosyaları diziye aktar
		foreach($_FILES['resim'] as $key=>$val) {
			$i = 1;
			foreach($val as $v) {
				$field_name = "file_".$i;
				$_FILES[$field_name][$key] = $v;
				$i++;
			}
		}
	}

	// Gereksiz olanı sil
	unset($_FILES['resim']);

    // Cevapları ayarla
    $error      = array();
    $success    = array();

	$i = 1; 
	$yuklenen = 0;
	foreach($_FILES as $field_name => $file) {
		if (!$this->upload->do_upload($field_name)) {
			$error[$i] = $this->upload->display_errors();
		} else {
			$upload_data = $this->upload->data();
			$success[$i] = $upload_data['file_name'];
			$yuklenen++;
		}
		$i++;
	}

	echo '<pre>';
	echo $yuklenen.' Adet fotoğraf yüklendi.<br />';
	for($j=1; $j<$i; $j++) {
		if(isset($error[$j])) {
			echo '<span class="badge bg-important"><i class="icon-remove-sign"></i></span> - Yüklenemedi.<br />';
		} else {
			echo '<span class="badge bg-success"><i class="icon-ok-sign"></i></span> - '.$success[$j].'<br />';
		}
	}
	echo '</pre>';
	exit();
}

Yukarıdaki kod kendini anlatıyor fakat yine de açıklayalım;

- "upload" kütüphanesini sayfamıza dahil ettik,
- Upload edilecek dosyalarımızla ilgili ayarlarımızı belirledik,
- Formdan gelen resimlerimizi bir diziye aktardık,
- Bu diziyi döngüye sokup resimleri upload ettik.
- Upload işlemi sonucunu her bir resim için ekrana bastırdık.

Codeigniter ve jquery ile çoklu resim upload işlemi bu şekilde. Görüldüğü gibi jquery form eklentisi ile controllera gönderdiğimiz resim dosyalarımızı Codeigniter'ın upload kütüphanesini kullanarak sistemimize yükledik. Dilerseniz burada "image_lib" kütüphanesini kullanarak resimleri yeniden boyutlandırma, thumbnail oluşturma, watermark ekleme, vb işlemleri uygulayabilirsiniz.

KAYNAK KODLARI İNDİR