Upload gambar dengan image preview

Haloo sobat Nubie, apa kabar ni ? udah pada mandi belum ? ūüôā

Pada tulisan kali ini Nubie akan share tidak sekedar bagaimana cara upload gambar, tapi cara upload gambar dengan image preview, jadi sebelum upload kita bisa melihat dulu penampakan gambarnya sebelum di upload. Oke langsung saja CEKIDOT.

Dalam kasus ini di butuhkan 2 file yaitu index.php dan upload_image.php, file index.php berisi tampilan form untuk upload gambarnya sedangkan upload_image.php sebagai fungsi untuk upload gambar.

Berikut isi dari index.php :

<html>
<head>
  <title>Upload Image</title>
  <script type="text/javascript" src="js/jquery.min.js"</script> <!-- Plugin JQuery yang di butuhkan untuk preview image -->

  <style type="text/css" rel="stylesheet"> /* Style untuk tampilan Form upload gambar */
    #file {
      color: red;
      padding: 5px;
      border: 5px solid #8BF1B0;
      background-color: #8BF1B0;
      margin-top: 10px;
      border-radius: 5px;
      box-shadow: 0 0 15px #626F7E;
      max-width: 250px;
    }

    #image_preview{
      font-size: 30px;
      top: 100px;
      left: 100px;
      width: 250px;
      height: 230px;
      text-align: center;
      line-height: 180px;
      font-weight: bold;
      color: #C0C0C0;
      background-color: #FFFFFF;
      overflow: hidden;
    }

    .submit{
      font-size: 16px;
      background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
      border: 1px solid #e5a900;
      color: #4E4D4B;
      font-weight: bold;
      cursor: pointer;
      width: 100px;
      border-radius: 5px;
      padding: 10px 0;
      outline: none;
    }

    .submit:hover{
      background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
    }

    .wrapper {
      background: rgb(221, 221, 221) none repeat scroll 0 0;
      border-radius: 5px;
      box-shadow: 0 0 10px 0 #000;
      padding: 20px;
      position: absolute;
      text-align: center;
    }
  </style>

  <script type="text/javascript"> /* script JQuery untuk load gambar pada bagian preview */
    $(function() {
      $("#file").change(function() {
        $("#message").empty(); // To remove the previous error message
        var file = this.files[0];
        var imagefile = file.type;
        var match= ["image/jpeg","image/png","image/jpg"];

        if (!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
        {
          $('#previewing').attr('src','noimage.png');
          $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
          return false;
        }else {
          var reader = new FileReader();
          reader.onload = imageIsLoaded;
          reader.readAsDataURL(this.files[0]);
        }
      });
    });

    function imageIsLoaded(e) {
      $("#file").css("color","green");
      $('#image_preview').css("display", "block");
      $('#previewing').attr('src', e.target.result);
      $('#previewing').attr('width', '250px');
      $('#previewing').attr('height', '230px');
    }
  </script>
</head>
<body>
  <div class="wrapper">
    <h1>Upload Gambar</h1>
    <div class="main">
      <form id="form_slideshow" action="upload_image.php" method="post" enctype="multipart/form-data">
        <div style="width: 250px;">
          <div style="float: left; margin-right: 20px; padding-top: 20px;">
            <div id="image_preview"><img id="previewing" src="images/noimage.png" /></div>
            <div id="selectImage" style="margin: 50px 0 0;">
              <div style="float: left;"><input type="file" name="file" id="file" required /></div>
              <div style="clear: both;"></div>
              <div style="float: right; margin-top: 15px;"><input type="submit" value="Simpan" class="submit" /></div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

 

Selanjutnya upload_image.php :

<?php
    $image_name = $_FILES['file']['name'];
    $path  = "images/" . $image_name;

    if (($_FILES['file']["type"] == "image/jpg" || $_FILES['file']["type"] == "image/jpeg" || $_FILES['file']["type"] == "image/png"))
    {
        $upload = move_uploaded_file($_FILES['file']['tmp_name'], $path);

        if ($upload )
        {
            echo "<script>alert('Upload gambar berhasil.'); window.location.assign('index.php');</script>";
        }
        else
        {
            echo "<script>alert('Upload gambar gagal.'); window.location.assign('index.php');</script>";
        }
    }
    else
    {
        echo "<script>alert('Upload gambar gagal, file gambar salah.'); window.location.assign('index.php');</script>";
    }
?>

Pada baris ke 2 – 3 mendefinisikan nama file gambar yang akan di upload dan lokasi gambar akan disimpan, pada baris ke 5 dilakukan pengecekan apakah file merupakan gambar atau bukan, file yang di izinkan berupa file JPG, JPEG atau PNG. Kemudian pada baris ke 7 adalah proses upload gambar dengan menggunakan fungsi move_uploaded_file().

Oke berikut link DEMO atau SOURCE CODE, silahkan di klik. Semoga bermanfaat. ūüôā

Leave a Reply

avatar
  Subscribe  
Notify of