Kategoriler
Kodlama

JavaScript ile dosya yükleme boyutu kontrolü

Maksimum dosya boyutunu JavaScript veya jQuery kullanarak belirlemek çok basit.

Belki ihtiyacımız olur diye buraya not almış olayım, JavaScript ile dosya yüklemelerinde dosya boyutunu sınırlamak ve uyarı mesajı vermek gibisinden bir kod parçacığını aşağıya ekliyorum.

jQuery kodu:

  $(document).ready(function(){
    $('#filesizecheck').on('change',function(){
      for(var i=0; i< $(this).get(0).files.length; ++i){
        var file1 = $(this).get(0).files[i].size;
        if(file1){
          var file_size = $(this).get(0).files[i].size;
          if(file_size > 2000000){
            $('#error-message').html("File upload size is larger than 2MB");
            $('#error-message').css("display","block");
            $('#error-message').css("color","red");
          }else{
            $('#error-message').css("display","none");
          }
        }
      }
    });
  });

Tam sayfa kodu:

<html>
<head>
  <meta charset="utf-8">
  <title>File upload size validation in javascript</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<body>
  <h3 style="text-align: center;">File upload size validation in javascript</h3>
  <div class="col-md-6 col-md-offset-5"><br>
  <input type="file" name="file"  id="filesizecheck"><br>
  <span id="error-message" class="validation-error-label"></span>
  </div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#filesizecheck').on('change',function(){
      for(var i=0; i< $(this).get(0).files.length; ++i){
        var file1 = $(this).get(0).files[i].size;
        if(file1){
          var file_size = $(this).get(0).files[i].size;
          if(file_size > 2000000){
            $('#error-message').html("File upload size is larger than 2MB");
            $('#error-message').css("display","block");
            $('#error-message').css("color","red");
          }else{
            $('#error-message').css("display","none");
          }
        }
      }
    });
  });
</script>
</body>
</html>
Dosya boyutu belirlenenden büyük ise sonuç bu şekilde olacaktır.
Dosya boyutu belirlenenden büyük ise sonuç bu şekilde olacaktır.

wolkanca.com’da JavaScript ile dosya yükleme boyutu kontrolü veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, JavaScript ile dosya yükleme boyutu kontrolü için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.