Get input type file size in KB

HTML

<input type="file" class="upload" onchange="readURL(this)" id="file" accept="image/x-

png,image/jpeg" />

<input type="button" value="Upload" class="btn btn-default" style="margin:auto;display:block" onclick="checksize(this)" />

Java Script

Get File Name in JavaScript:

document.getElementById('file').files[0].name

Get File Size in JavaScript:

document.getElementById('file').files[0].size

Get File Type in JavaScript:

document.getElementById('file').files[0].type

Get File Modified Date in JavaScript:

document.getElementById('file').files[0].lastModifiedDate

You can use the following code to get the file information after selecting a file.

Get file extension

var fname=document.getElementById('File_name').files[0].name;
var ext=fname.split('.').pop();

Jquery

// check file size

function checksize(file) {

  

    var size = $j("#" + file)[0].files[0].size / 1024;

   

    if (size>100) {

       alert("File size exceed. Maximum 100kb is allowed.");

        return false;

    }

    else {

       alert("ok");

        return true;

    }

   

}

check empty file

 try 

  {

        alert($j("#fileRO")[0].files[0].name);

  } 

  catch (exception) 

  {

        alert('Please select a image file');

  }

Check 1 MB File

function getFileSize(id)
{ 

        try {

            if ((document.getElementById(id).files[0].size / 1024) > 1000)              {

                alert("Sorry Maximum 1 MB file size is allowed");                          return false;

            }
            else
                return true;

        }

        catch (exception)
        {

            alert('Please select a image file');
            return false;
        }

    }

Show file in img tag selected by input type file control by button click event

HTML

  <input type="file" id="MainFile" style="display:inline" accept="image/jpeg, image/png, image/jpg"/>

 <input type="button" value="Upload  " class="btn btn-success" onclick="UploadMainImage()" /><br /><br />

  <img src="~/AppImage/page/blank-image.jpg" id="imgMain" style="width:200px"/>

Javascript

function UploadMainImage() {

    var reader = new FileReader();

    reader.onload = function (e) {

        $('#imgMain')

        .attr('src', e.target.result);          

    };

    reader.readAsDataURL($("#MainFile")[0].files[0]);   

}

Next Topic