Tutorial AJAX PHP

Upload & Resize Gambar Menggunakan Ajax Jquery PHP Tanpa Refresh Halaman

Upload & Resize Gambar Menggunakan Ajax Jquery PHP Tanpa Refresh Halaman

Tutorial Upload & Resize Gambar Menggunakan Ajax Jquery PHP Tanpa Refresh Halaman ini akan menjelaskan bagaimana Develindo.com cara mengupload gambar dan memperkecil ukuran (resize) sesuai dengan ukuran yang diinginkan dengan menggunakan AJAX PHP.

>>Lihat Hasilnya

ikuti langkah-langkah berikut ini.

Buat file index.php dan simpan difolder yang anda buat. misalnya folder resize di htdoc

index.php
 

 <!DOCTYPE html>
 <html>
      <head>
           <title>Develindo | Upload & Resize Gambar Menggunakan Ajax Jquery PHP Tanpa Refresh Halaman</title>
           <!-- Bootstrap core CSS -->
           <link href="css/bootstrap.css" rel="stylesheet">
           <!-- Bootstrap core JavaScript-->
           <script src="js/jquery.min.js"></script>
           <script src="js/bootstrap.js"></script>

      </head>
      <body>
  <div class="container">
   <br />
   <br />
   <h3>Upload & Resize Gambar Menggunakan Ajax Jquery PHP Tanpa Refresh Halaman</h3><br />
   <form method="post" id="upload_image" enctype="multipart/form-data">
    <label>Pilih Gambar <br />
    <input type="file" name="image_upload" id="image_upload" accept=".jpg, .png"/>
    <br />
    <input type="submit" name="upload" id="upload" class="btn btn-success" value="Upload" />
   </form>
   <br />
   <br />
   <div id="preview"></div>
   <br />
   <br />
  </div>
 </body>
</html>
<script>
$(document).ready(function(){
    $('#upload_image').on('submit', function(event){
     event.preventDefault();
     $.ajax({
      url:"upload.php",
      method:"POST",
      data:new FormData(this),
      contentType:false,
      cache:false,
      processData:false,
      success:function(data){
       $('#preview').html(data);
      }
     })
    });
});
</script>


simpan file index di folder yang telah anda buat.

upload.php
 

<?php
if(isset($_FILES["image_upload"]["name"]))
{
 $name = $_FILES["image_upload"]["name"];
 $size = $_FILES["image_upload"]["size"];
 $ext = strtolower(end(explode(".", $name)));
 $allowed_ext = array("png", "jpg", "jpeg");
 if(in_array($ext, $allowed_ext))
 {
  if($size < (1024*1024))
  {
   $new_image = '';
   $new_name = md5(rand()) . '.' . $ext;   //acak nama untuk gambar yang baru
   $path = 'images/' . $new_name;  //lokasi penyimpanan gambar yang baru
   list($width, $height) = getimagesize($_FILES["image_upload"]["tmp_name"]);
   if($ext == 'png')
   {
    $new_image = imagecreatefrompng($_FILES["image_upload"]["tmp_name"]);
   }
   if($ext == 'jpg' || $ext == 'jpeg')
            {
               $new_image = imagecreatefromjpeg($_FILES["image_upload"]["tmp_name"]);
            }
            $new_width=200;   //ukuran lebar gambar yang baru
            $new_height = ($height/$width)*200;       //ukuran tinggi gambar yang baru
            $tmp_image = imagecreatetruecolor($new_width, $new_height);
            imagealphablending($tmp_image, false);
            imagesavealpha($tmp_image,true);
            $transparent = imagecolorallocatealpha($tmp_image, 255, 255, 255, 127);
            imagefilledrectangle($tmp_image, 0, 0, $new_width, $new_height, $transparent);
            imagecopyresampled($tmp_image, $new_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
            imagejpeg($tmp_image, $path, 100);
            imagepng($tmp_image, $path);
            imagedestroy($new_image);
            imagedestroy($tmp_image);
            echo '<img src="'.$path.'" />';
            echo '<p>Upload & rezise gambar berhasil tersimpan di folder images';
  }
  else
  {
   echo 'File Gambar Maksimal 1 MB';
  }
 }
 else
 {
  echo 'Ekstensi File Tidak Diizinkan';
 }
}
else
{
 echo 'Anda belum memilih gambar';
}
?>


disini anda dapat melakukan konfigurasi tempat penyimpanan, ukuran lebar dan tinggi gambar yang akan diupload.

download source code dibawah ini. terimakasi

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website