[CodeIgniter] Membuat Multiple Ajax Image dan File Upload
Sebelumnya saya membuat artikel mengenai Ajax Upload pada CodeIgniter dan kali ini saya membuat pengembangan dari artikel tersebut.
Sebenarnya Multiple Upload pada library bawaan codeigniter tidak sebenarnya di dukung, sebab jika inputan yang di upload berbentuk array maka CI_Upload menolaknya. Oleh sebab itu di sini saya membuat library yang meng-extends CI_Upload dimana pada bagian do_upload sedikit di rubah. do_upload yang ada pada library baru itu sendiri saya ambil dari CI_Upload. Bagaimana penerapannya berikut saya jelaskan.
Buat controller atau disini saya pakai welcome.php dan kemudian isi dengan script berikut
public function __construct()
{
parent::__construct();
$this->load->helper(array('html','url'));
}
public function index()
{
$this->load->view('welcome_message');
}
public function upload()
{
if(isset($_FILES['image']))
{
$data=$_FILES['image'];
$total = count($data['name']);
$data2=array();
for($i=0; $i<$total; $i++)
{
$data2[]=array(
'name'=>$data['name'][$i],
'type'=>$data['type'][$i],
'tmp_name'=>$data['tmp_name'][$i],
'error'=>$data['error'][$i],
'size'=>$data['size'][$i],
);
}
$no=0;
foreach($data2 as $row)
{
$config['upload_path'] = './assets/uploads';
$config['allowed_types'] = 'gif|jpg|png|bmp';
$this->load->library('multi_upload', $config);
if($this->multi_upload->do_upload($data2[$no]))
{
$image_data = $this->multi_upload->data();
echo img(array(
'src'=>base_url("assets/uploads/$image_data[file_name]"),
'width'=>300,
'style'=>'margin:10px; padding:10px; background:#bbb'
));
}
$no++;
}
}
}
Kemudian buat view, disini saya pakai welcome_message.php tambahkan script berikut
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-1.7.2.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery.form.js'); ?>"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#form-upload').on('submit', function(e) {
e.preventDefault();
jQuery('#submit-button').attr('disabled', '');
jQuery("#output").html('<div style="padding:10px"><img src="<?php echo base_url('assets/images/loading.gif'); ?>" alt="Please Wait"/> <span>Mengunggah...</span></div>');
jQuery(this).ajaxSubmit({
target: '#output',
success: sukses
});
});
var count = 1;
jQuery("#add_btn").click(function(){
count += 1;
jQuery('#fill').append('<tr class="records"><td><label>Foto '+count+' </label><input name="image[]" type="file" /> <a class="remove_item" href="#" >Delete</a></td></tr>');
});
jQuery(".remove_item").live('click', function (ev) {
if (ev.type == 'click') {
jQuery(this).parents(".records").fadeOut();
jQuery(this).parents(".records").remove();
}
});
});
function sukses() {
jQuery('#form-upload').resetForm();
jQuery('#submit-button').removeAttr('disabled');
}
</script>
</head>
<body>
<div id="container">
<h1>CodeIgniter Ajax Multi Upload<span style="float:right">Dida Nurwanda</span></h1>
<div id="body">
<div align="left" id="wrapper">
<form action="<?php echo site_url('welcome/upload'); ?>" method="post" enctype="multipart/form-data" id="form-upload">
<table>
<thead>
<tr>
<td><input type="button" name="add_btn" value="Add" id="add_btn"></td>
</tr>
</thead>
<tbody id="fill">
<tr>
<td><label>Foto 1</label> <input name="image[]" type="file" /></td>
</tr>
</tbody>
<tr>
<td><input type="submit" id="submit-button" value="Upload" /></td>
</tr>
</table>
</form>
<div id="output"></div>
</div>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
</html>
dan terakhir buat library dengan nama multi_upload.php dan isi dengan script berikut
<?php
/**
* Multi Upload
*
* @author Dida Nurwanda
* @email dida_n@ymail.com
*/
require_once SYSDIR.'/libraries/Upload.php';
class multi_upload extends CI_Upload
{
public function __construct($props = array())
{
parent::__construct($props);
}
public function do_upload($data=array())
{
if (!isset($data))
{
$this->set_error('upload_no_file_selected');
return FALSE;
}
if (!$this->validate_upload_path())
return FALSE;
if (!is_uploaded_file($data['tmp_name']))
{
$error = ( ! isset($data['error'])) ? 4 : $data['error'];
switch($error)
{
case 1:
$this->set_error('upload_file_exceeds_limit');
break;
case 2:
$this->set_error('upload_file_exceeds_form_limit');
break;
case 3:
$this->set_error('upload_file_partial');
break;
case 4:
$this->set_error('upload_no_file_selected');
break;
case 6:
$this->set_error('upload_no_temp_directory');
break;
case 7:
$this->set_error('upload_unable_to_write_file');
break;
case 8:
$this->set_error('upload_stopped_by_extension');
break;
default : $this->set_error('upload_no_file_selected');
break;
}
return FALSE;
}
$this->file_temp = $data['tmp_name'];
$this->file_size = $data['size'];
$this->_file_mime_type($data);
$this->file_type = preg_replace("/^(.+?);.*$/", "\\1", $this->file_type);
$this->file_type = strtolower(trim(stripslashes($this->file_type), '"'));
$this->file_name = $this->_prep_filename($data['name']);
$this->file_ext = $this->get_extension($this->file_name);
$this->client_name = $this->file_name;
if (!$this->is_allowed_filetype())
{
$this->set_error('upload_invalid_filetype');
return FALSE;
}
if ($this->_file_name_override != '')
{
$this->file_name = $this->_prep_filename($this->_file_name_override);
if (strpos($this->_file_name_override, '.') === FALSE)
$this->file_name .= $this->file_ext;
else
$this->file_ext = $this->get_extension($this->_file_name_override);
if (!$this->is_allowed_filetype(TRUE))
{
$this->set_error('upload_invalid_filetype');
return FALSE;
}
}
if ($this->file_size > 0)
$this->file_size = round($this->file_size/1024, 2);
if (!$this->is_allowed_filesize())
{
$this->set_error('upload_invalid_filesize');
return FALSE;
}
if (!$this->is_allowed_dimensions())
{
$this->set_error('upload_invalid_dimensions');
return FALSE;
}
$this->file_name = $this->clean_file_name($this->file_name);
if ($this->max_filename > 0)
$this->file_name = $this->limit_filename_length($this->file_name, $this->max_filename);
if ($this->remove_spaces == TRUE)
$this->file_name = preg_replace("/\s+/", "_", $this->file_name);
$this->orig_name = $this->file_name;
if ($this->overwrite == FALSE)
{
$this->file_name = $this->set_filename($this->upload_path, $this->file_name);
if ($this->file_name === FALSE)
return FALSE;
}
if ($this->xss_clean)
{
if ($this->do_xss_clean() === FALSE)
{
$this->set_error('upload_unable_to_write_file');
return FALSE;
}
}
if ( ! @copy($this->file_temp, $this->upload_path.$this->file_name))
{
if ( ! @move_uploaded_file($this->file_temp, $this->upload_path.$this->file_name))
{
$this->set_error('upload_destination_error');
return FALSE;
}
}
$this->set_image_properties($this->upload_path.$this->file_name);
return TRUE;
}
}
Selesai deh, mudah sekali bukan :D
Berikut penampakannya.
Download
Password : didanurwanda.blogspot.com
thanks untuk share ilmu nya, tp mohon bantuan nya saya masih ada error ketika upload
BalasHapusFatal error: Call to undefined method multi_upload::_file_mime_type() in E:\xampp\htdocs\alpha\application\libraries\multi_upload.php on line 61
mohon pencerahannya
bravo
Normal banget bro, udah di cek lagi tadi. malah nggak perlu setting apa2 lagi,
Hapusmaksud nya normal gimana bro ??? ane msh blum jelas, ane udah coba lagi script diatas, masih ada pesan error, dan gambar yg di upload juga blum success ke upload bro
BalasHapusmohon pencerahannya bro
bravo
normal = bisa maksudnya, saya pake CodeIgniter 2.1.3 jalan, hanya tinggal copy folder tersebut kedalam folder CodeIgniter_2.1.3 dan pilih replace, selebihnya tidak perlu setting apa2 lagi.
Hapusini CI 2.1.3 https://github.com/EllisLab/CodeIgniter/tree/2.1.3
soalnya di halaman depan itu CI 3 dan masih beta.
thanks bro untuk info nya
BalasHapusane juga pake CI 2.1.3 bro tp hasil masih sama......kalo ane browsing" ke google error tsb library multi_upload nya untuk "$this->_file_mime_type($data);" yg gak kepanggil.....punya pencerahan lg bro buat kasus ane.....
sebelum nya thanks ya bro
errornya sih tau, tapi gimana mau benerinya lah disini jalan normal kok. nih coba yang udah lengkap http://www.4shared.com/zip/EPfVhcUQ/upl.html
Hapusmangap bro.....baru bisa say thanks
BalasHapusizin sedot bro....meluncur ke tkp
Thanks
Bravo
makasi banget iilmunya gann,, tapi mau nanya kalo mau echo url tempat simpen file yang ditampilinnya apa yang musti d echo d tampilannya ya gan??
BalasHapusmakasi gan.,
itu sih cuma contoh aja bro, biar simpel.
Hapuskalo nampilin sih bisa dimana aja + di apain aja tergantung selera.
maaf ni gan, mohon maaf sebelumnya, script ini kalau di localhost bisa jalan sempurna, tapi lok di webhosting gak bisa jalan ya gan..??
BalasHapusdi cek confignya gan, sama .htaacess nya.
Hapusmas dinda, kalo tanpa add form, tapi sekaligus 5 file dalam 1 form upload gimana??
BalasHapusthank you ilmu nya gan . tapi izin tanya , jika memakai CI versi 2.1.4 , ketika klik upload , file image nya gak bisa keluar . mohon pencerahan nya gan
BalasHapusthank you :)
Broo... kalau nama imagenya mau kita simpan ke database gimana?
BalasHapusMembantu bangeeeet min
BalasHapuserror
BalasHapus