Tutorial AJAX PHP

Upload Gambar Tanpa Menggunakan Form Submit dengan Ajax dan PHP

Upload Gambar Tanpa Menggunakan Form Submit dengan Ajax dan PHP

Tutorial ini menjelaskan bagaimana cara mengupload file gambar tanpa me-reload atau refresh halaman web anda. AJAX membantu proses upload menjadi lebih cepat tanpa refresh halaman dan menampilkan hasil gambar yang terupload.AJAX dapat digunakan tanpa adanya form submit seperti form-form lainnya, hanya menggunakan elemen html yang ada maka file gambar dapat terupload pada folder yang telah ditentukan.


Upload file dengan ajax dan php memungkinkan web anda semakin dinamis dan menarik. Bagaimanakah cara membuatnya silahkan ikuti langkah berikut ini.


Source Code:

Preview Demo

index.php


 <!DOCTYPE html>
 <html>
      <head>
           <title>Develindo | Upload Gambar Tanpa Menggunakan Form Submit dengan Ajax dan PHP</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>
  <br /><br />
  <div class="container" style="width:700px;">
   <h2 align="center">Upload Gambar Tanpa Menggunakan Form Submit dengan Ajax dan PHP</h2>
   <br />
   <label>Pilih Gambar</label>
   <input type="file" name="file" id="file" />
   <br />
   <span id="uploaded_image"></span>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $(document).on('change', '#file', function(){
  var name = document.getElementById("file").files[0].name;
  var form_data = new FormData();
  var ext = name.split('.').pop().toLowerCase();
  if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1)
  {
   alert("Invalid Image File");
  }
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("file").files[0]);
  var f = document.getElementById("file").files[0];
  var fsize = f.size||f.fileSize;
  if(fsize > 2000000)
  {
   alert("Ukuran File Gambar Terlalu Besar Maksimal 2MB");
  }
  else
  {
   form_data.append("file", document.getElementById('file').files[0]);
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend:function(){
     $('#uploaded_image').html("<label class='text-success'>Sedang Mengupload Gambar...</label>");
    },
    success:function(data)
    {
     $('#uploaded_image').html(data);
    }
   });
  }
 });
});
</script>


simpan file dengan nama index.php dan simpan difolder yang anda tentukan sendiri.


Selanjutnya buat file upload.php


upload.php


<?php
if($_FILES["file"]["name"] != '')
{
 $test = explode('.', $_FILES["file"]["name"]);
 $ext = end($test);
 $name = rand(100, 999) . '.' . $ext;
 $location = 'images/' . $name;
 move_uploaded_file($_FILES["file"]["tmp_name"], $location);
 echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';
 echo '<p>Gambar Telah Terupload di folder images</p>';
}
?>


Setelah anda membuat file index.php dan upload.php anda dapat mencoba menjalankan code tersebut di localhost.

Download Project

Jika anda membutuhkan untuk bahan belajar silahkan anda dapat mendownload file tersebut. Terimakasih

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website