/**/

Read     Tutorial: Cara Validasi Upload File JPG, PNG, dan JPEG dengan Javascript

Tutorial: Cara Validasi Upload File JPG, PNG, dan JPEG dengan Javascript

Javascript
Hirzi Widyan Putra

Cara melakukan validasi pada unggahan file agar hanya menerima jenis file JPG, PNG, dan JPEG atau file tertentu menggunakan JavaScript.

Kenapa perlu melakukan validasi? Tujuannya agar user mengupload memang sesuai dengan  tipe file yang kita mau, jadi validasi ini memastikan bahwa hanya file dengan ekstensi .jpg, .jpeg, atau .png yang diterima untuk diupload kedalam sistem kita sob. Upload file .pdf, dkk juga bisa tinggal ditambahin saja nanti di javascriptnya.

Pertama Form HTML nya seperti ini:

 

<form action="upload.html" method="post" enctype="multipart/form-data" onsubmit="return validasiFile()">

      <input type="file" name="fileGambar" class="fileGambar">

      <button type="submit" name="submit">Upload</button>

    </form>

Lalu Pada Javascript nya :

 

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script>

function validasiFile() {
    var fileGambar = document.getElementsByClassName('fileGambar');
    var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
    var valid = true;

    for (var i = 0; i < fileGambar.length; i++) {
        var filePath = fileGambar[i].value;

        if (!allowedExtensions.exec(filePath)) {
            alert('Ooops.. Hanya Bisa Upload file JPG, JPEG, dan PNG!');
            fileGambar[i].value = '';
            valid = false;
        }
    }
    return valid;
}
</script>

Note :

  • Jquerynya kalau kamu sudah ada, bisa diskip ya
  • Kalau mau nambahin format file tertentu seperti pdf, tinggal tambahin dibagian ini kya gini sob :

 

 var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.pdf)$/i;

 Full Coding yang saya contohin jadi nya seperti ini :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@gilacoding</title>
  <style type="text/css">
   body {
    background: #0d45a5;

    font-family: "Segoe UI";
   }
.center-box{
  margin: auto;
  height: 120px;
  width: 520px;
  color: #000;
  border-radius: 20px;
  box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.15);
  text-align: center;
  vertical-align: middle;
  padding-top: 20px;
  box-sizing: border-box;
  background: #fff;
}
h1 {
  margin-top: 60px;
  text-align: center;
  color: #fff;
}
button[type=submit] {
  padding: 10px 20px;
  color: #fff;
  background: #084cdf;
  border: 2px solid #084cdf;
  height: 49px;
}
button[type=submit]:hover {
  color: #084cdf;
  background: #fff;
  border: 2px solid #084cdf;
}
input[type=file] {
  box-sizing: border-box;
  padding: 5px 10px;
  border: 2px solid #084cdf;
  color: #084cdf;
  transition: background .2s ease-in-out;
}
input[type=file]::file-selector-button {
  margin-right: 20px;
  border: 0;
  background: #084cdf;
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
  background: #0d45a5;
}
  </style>
</head>
<body>
    <h1>Validasi Upload File Hanya Bisa (JPG/PNG/JPEG)</h1>
  <div class="center-box">
    
    <form action="upload.html" method="post" enctype="multipart/form-data" onsubmit="return validasiFile()">
      <input type="file" name="fileGambar" class="fileGambar">
      <button type="submit" name="submit">Upload</button>
    </form>

      <p><a href="gilacoding.com">@gilacoding</a></p>
  </div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 
<script>
function validasiFile() {
    var fileGambar = document.getElementsByClassName('fileGambar');
    var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
    var valid = true;

    for (var i = 0; i < fileGambar.length; i++) {
        var filePath = fileGambar[i].value;

        if (!allowedExtensions.exec(filePath)) {
            alert('Ooops.. Hanya Bisa Upload file JPG, JPEG, dan PNG!');
            fileGambar[i].value = '';
            valid = false;
        }
    }
    return valid;
}
</script>

</body>
</html>

Semoga tutorial ini membantu kamu yaa memahami cara menggunakan JavaScript untuk melakukan validasi saat mengunggah file gambar atau lainnya dengan jenis tertentu dalam pengembangan web.

Tiktok Gilacoding :  https://www.tiktok.com/@gilacoding

Youtube gilacoding : https://youtube.com/gilacoding

 Previous Post
Top