Cara Upload Foto Di PHP Dengan AJAX

Kalau tadi saya memberikan tutorial Cara Upload Foto Di PHP kali ini saya akan menambahkan sedikit bumbu jQuery dengan metode AJAX, untuk response nya sendiri saya menggunakan format JSON, jika anda belum tau apa itu format JSON saya sarankan baca dulu artikel Pengertian JSON, Cara Menggunakan JSON Di Javascript dan Cara Menggunakan JSON Di PHP, seperti dalam tutorial sebelum-sebelumnya saya akan menggunakan plugin dari jQuery, anda bisa mendownload nya disini atau bisa juga menyalin kode berikut.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

pertama anda harus menentukan file dan fungsingya terlebih dahulu, disini saya membuat 2 file yaitu file index.php dan aksi.php
1. index.php menampilkan semua foto yang telah upload
2. aksi.php memproses data yang dikirim melalui AJAX
sekarang buat project dengan nama terserah anda kemudian buat file index.php dan salin kode di bawah ini

<?php session_start(); // unset($_SESSION['datas']); ?>
<!DOCTYPE html>
<html>
<head>
<title>UPLOAD FOTO DENGAN JQUERY</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body style="font-family: verdana; font-size: 14px;">
<h3>UPLOAD FOTO DENGAN JQUERY</h3>
<hr />
<form class="form" method="POST" enctype="multipart/form-data">
<input type="file" name="foto"><button type="submit" name="action">UPLOAD</button>
<hr />
<br />
<h3>HASIL UPLOAD</h3>
<div class="result-upload"> 
<?php
if(count(@$_SESSION['datas']) > 0){
foreach(@$_SESSION['datas'] as $data){ ?>
<img src="<?php echo $data; ?>" height="100">
<?php }} ?>
</div>
</form>
<script type="text/javascript">
$('.form').on('submit', function(e){
 var data = new FormData($(this)[0]);

 $.ajax({
  'type': 'POST',
  'dataType': 'JSON',
  'url': 'aksi.php',
  'data': data,
  'processData': false,
  'contentType': false,
  'cache': false,
  'beforeSend': function(){
   // proses semebelum mengirim data
  },
  'success': function(response){
   if(response.error == false){
    var img = '<img src="'+ response.link +'" height="100" />';
    $('.result-upload').append(img);
   }else if(response.error == true){
    alert(response.pesan);
   }
  }
 });

 e.preventDefault();
});
</script>
</body>
</html>

jika sudah sekarang buat file aksi.php kemudian salin kode dibawah ini, disini saya menggunakan $_SESSION untuk menampuyng data yang sudah di upload

<?php
 session_start();
 @$_SESSION['datas'] = count(@$_SESSION['datas']) > 0 ? @$_SESSION['datas'] : array();
 $array = count(@$_SESSION['datas']) == 0 ? 0 : count(@$_SESSION['datas']);

 $temp = $_FILES['foto']['tmp_name'];
 $name = $_FILES['foto']['name'];
 if(strlen($temp) > 0){
  $file = 'foto/'.$name;
 
  // semua file foto di simpan di session
  @$_SESSION['datas'][$array] = $file;
  move_uploaded_file($temp, $file);

  $response = array(
   'error'=>false,
   'link'=>$file
  );
 }else{
  $response = array(
   'error'=>true,
   'pesan'=>'Silahkan pilih foto untuk di upload'
  );
 }

 echo json_encode($response);
?>

jika ke 2 file suda di buat, sekarang buat folder foto di dalam project yang sudah anda buat, folder foto disini untuk menampung hasil dari upload
sekarang buka project anda melalui browser, ketika anda menekan button upload maka AJAX akan mengirim data ke aksi.php, dan akan memindahkan foto yang di upload ke dalam folder foto yang ada di dalam project anda, lihat gambar di bawah ini.

Cara Upload Foto Di PHP Dengan AJAX (Hasil Result)

jika anda ingin hasil foto yang di upload masuk ke database, pertama buat database terlebih dahulu dengan nama terserah anda, kemudian buat table dengan nama foto, silahlan salin kode berikut

DROP TABLE IF EXISTS `foto`;
CREATE TABLE `foto` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `foto` varchar(150) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

jika table sudah dibuat, buka file index.php dan ganti kode dibawah ini.

// ganti kode yang ini
<?php session_start(); // unset($_SESSION['datas']); ?>

// dengan kode yang ini
<?php
 session_start();

 $host = 'localhost';
 $user = 'root';
 $pass = '';
 $db = 'belajar_upload';

 $conn = mysql_connect($host, $user, $pass);
 mysql_select_db($db, $conn);
?>

// lalu ganti kode yang ini
<?php
if(count(@$_SESSION['datas']) > 0){
foreach(@$_SESSION['datas'] as $data){ ?>
<img src="<?php echo $data; ?>" height="100">
<?php }} ?>

// dengan kode yang ini
<?php
 $sql = 'SELECT * FROM foto';
 $rs = mysql_query($sql);

 if(mysql_num_rows($rs) > 0){
 while($row = mysql_fetch_array($rs)){
  $data = $row['foto'];
?>
<img src="<?php echo $data; ?>" height="100">
<?php }} ?>

kemudian buka file aksi.php dan ganti semua kode degan kode yang dibawah ini

<?php
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 $db = 'belajar_upload';

 $conn = mysql_connect($host, $user, $pass);
 mysql_select_db($db, $conn);

 $temp = $_FILES['foto']['tmp_name'];
 $name = $_FILES['foto']['name'];
 if(strlen($temp) > 0){
  $file = 'foto/'.$name;
 
  $sql = 'INSERT INTO foto SET';
  $sql .= ' foto="'.$file.'"';
  mysql_query($sql);

  move_uploaded_file($temp, $file);

  $response = array(
   'error'=>false,
   'link'=>$file
  );
 }else{
  $response = array(
   'error'=>true,
   'pesan'=>'Silahkan pilih foto untuk di upload'
  );
 }
?>

Keterangan :
- Untuk $user, $pass dan $db sesuai dengan username, password dan database anda.
Ok. sampai di sini dlu tutorial kali ini, selamat mencoba dan semoga bermanfaat.

Berbagi Via

Cara Upload Foto Di PHP Dengan AJAX

Jangan lupa tinggalkan komentarnya ya :)

No comments:

Post a Comment