how can we check file upload size validation

Question

what i am trying to do in my below code i want to check one more condition when file is upload its should be check file size is greater than 10 mb then is show success message and file size is less than 10 mb then its show error message.while uploading the file .

in my below code right now what is this i check two condition when file is upload its should check jpeg or png then its show success message and file extension is not jpeg or png then its show error message.so in my below i want to check one more condition file size how can we do that.

is there any help?

function fileValidation() {
  var fileInput =
    document.getElementById('file');

  var filePath = fileInput.value;

  // Allowing file type 
  var allowedExtensions =
    /(\.doc|\.PNG|\.jgeg)$/i;

  if (!allowedExtensions.exec(filePath)) {
    // alert('Invalid file type'); 
    var y = document.getElementById("msg").innerHTML = "choose another file";
    fileInput.value = '';
    return false;
  } else {
    //  alert('file type'); 
    var y = document.getElementById("msg").innerHTML = "SUCCESS";
    return true;
  }
}

function tog(v) {
  return v ? "addClass" : "removeClass";
}
$(document).on("input", ".clearable", function() {
  $(this)[tog(this.value)]("x");
}).on("mousemove", ".x", function(e) {
  $(this)[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]("onX");
}).on("touchstart click", ".onX", function(ev) {
  ev.preventDefault();
  $(this).removeClass("x onX").val("").change();
});

.clearable {
  background: #fff url(https://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;
  border-radius: 3px;
  transition: background 0.4s;
}

.clearable.x {
  background-position: right 5px center;
}

.clearable.onX {
  cursor: pointer;
}

.clearable::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<input class="clearable" type="file" id="file" onchange="return fileValidation()" />

<p id="msg"></p>

any help on this its very thankful.

Hope this answers your question . https://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation — Ashish M J, Mar 12 '21 at 05:43
i m pretty new much in this part can u help me out how can i check one more condition in my code?? — sneha, Mar 12 '21 at 06:06
Does this answer your question? [Client Checking file size using HTML5?](https://stackoverflow.com/questions/4112575/client-checking-file-size-using-html5) — Khurram Ishaque, Mar 12 '21 at 07:43

score 0 · Answer 1 · answered Mar 12 '21 at 06:52

0

You Can Try This...

<!DOCTYPE html>
<html>
<head>
    <title>Get File Size Before Uploading </title>
</head>

<body>
    <p>
        <input type="file" id="file" multiple onchange="GetFileSize()" />
    </p>
    
    <p id="fp"></p>
</body>

<script>
    function GetFileSize() {
        var fi = document.getElementById('file'); // GET THE FILE INPUT.

        // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
        if (fi.files.length > 0) {
            // RUN A LOOP TO CHECK EACH SELECTED FILE.
            for (var i = 0; i <= fi.files.length - 1; i++) {

                var fsize = fi.files.item(i).size;      // THE SIZE OF THE FILE.
                document.getElementById('fp').innerHTML =
                    document.getElementById('fp').innerHTML + '<br /> ' +
                        '<b>' + Math.round((fsize / 1024)) + '</b> KB';
            }
        }
    }
</script>
</html>

answered Mar 12 '21 at 06:52

Vijay Dwivedi

172
2
12

i want to check file extension also like jpeg png how can we do that ? @vijay Dwivedi – sneha Mar 12 '21 at 06:56
1

You can use accept="gif|jpg" tag in input upload – Vijay Dwivedi Mar 12 '21 at 07:01
in ur above code i want to show success or error message – sneha Mar 12 '21 at 07:03
like while uploading the file is file upload greater than 10 mb then show success message and less than 10 mb then show error message how can we do that ?? @vijay Dwivedi – sneha Mar 12 '21 at 07:04
check the latest one. – Vijay Dwivedi Mar 12 '21 at 07:08
i want ot show message print not in alert format – sneha Mar 12 '21 at 07:10
you can use Label or p in the place of alert and set value by js. – Vijay Dwivedi Mar 12 '21 at 07:13

score 0 · Answer 2 · answered Mar 12 '21 at 07:39

merge in ur code

function fileValidation() { 
            var fileInput =  
                document.getElementById('file'); 
              
            var filePath = fileInput.value; 
          
            // Allowing file type 
            var allowedExtensions =  
/(\.doc|\.PNG|\.jgeg)$/i; 
              
            if (!allowedExtensions.exec(filePath)) { 
               // alert('Invalid file type'); 
               var y = document.getElementById("msg").innerHTML = "choose another file";
                fileInput.value = ''; 
                return false; 
            }  else {
              //  alert('file type'); 
               var y = document.getElementById("msg").innerHTML = "SUCCESS";
                return true;
            }
        }

@vijay Dwivedi i am post that code above just now can i merge this condition also in ur code is it possible??? — sneha, Mar 12 '21 at 07:41

how can we check file upload size validation

2 Answers2