JavaScript file upload size validation

Question

Is there any way to check file size before uploading it using JavaScript

User · Answer

You can try this fineuploader  It works fine under IE6 and above   Chrome or Firefox

User · Answer

If you set the Ie  Document Mode  to  Standards  you can use the simple javascript  size  method to get the uploaded file s size   Set the Ie  Document Mode  to  Standards     lt meta http-equiv  X-UA-Compatible  content  IE Edge  gt    Than  use the  size  javascript method to get the uploaded file s size    lt script type  text javascript  gt      var uploadedFile   document getElementById  imageUpload        var fileSize   uploadedFile files 0  size      alert fileSize     lt  script gt    It works for me

User · Answer

It s pretty simple              var oFile   document getElementById  quot fileUpload quot   files 0       lt input type  quot file quot  id  quot fileUpload quot  accept  quot  jpg  png  gif  jpeg quot   gt               if  oFile size  gt  2097152     2 MiB for bytes                                alert  quot File size must under 2MiB  quot                    return

User · Answer

I ran across this question  and the one line of code I needed was hiding in big blocks of code  Short answer  this files 0  size By the way  no JQuery needed

User · Answer

I made something like that   x000D   x000D      image-file   on  change   function      var numb     this  0  files 0  size 1024 1024  numb   numb toFixed 2   if numb  gt  2   alert  to big  maximum is 2MiB  You file size is      numb    MiB      else   alert  it okey  your file has     numb    MiB                 x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 0 jquery min js  gt  lt  script gt   lt input type  file  id  image-file  gt  x000D   x000D   x000D

User · Answer

Using jquery   lt form action  quot upload quot  enctype  quot multipart form-data quot  method  quot post quot  gt                       Upload image       lt input id  quot image-file quot  type  quot file quot  name  quot file quot    gt       lt input type  quot submit quot  value  quot Upload quot    gt        lt script type  quot text javascript quot  gt              image-file   bind  change   function                 alert  This file size is      this files 0  size 1024 1024    quot MiB quot                     lt  script gt    lt  form gt

User · Answer

Even though the question is answered  I wanted to post my answer  Might come handy to future viewers You can use it like in the following code   lt input type  quot file quot  id  quot fileinput quot    gt   lt script type  quot text javascript quot  gt    function readSingleFile evt          Retrieve the first  and only   File from the FileList object     var f   evt target files 0        if  f          var r   new FileReader          r onload   function e               var contents   e target result          alert   quot Got the file n quot                   quot name   quot    f name    quot n quot                  quot type   quot    f type    quot n quot                  quot size   quot    f size    quot  bytesn quot                   quot starts with   quot    contents substr 1  contents indexOf  quot n quot                        if f size  gt  5242880                   alert  File size Greater then 5MiB                                                r readAsText f         else          alert  quot Failed to load file quot

User · Answer

Works for Dynamic and Static File Element Javascript Only Solution  x000D   x000D  function ValidateSize file            var FileSize   file files 0  size   1024   1024     in MiB         if  FileSize  gt  2                alert  File size exceeds 2 MiB                    file  val        for clearing with Jquery           else                    x000D    lt input onchange  ValidateSize this   type  file  gt  x000D   x000D   x000D

User · Answer

I use one main Javascript function that I had found at Mozilla Developer Network site https   developer mozilla org en-US docs Using files from web applications  along with another function with AJAX and changed according to my needs  It receives a document element id regarding the place in my html code where I want to write the file size    lt Javascript gt   function updateSize elementId        var nBytes   0      oFiles   document getElementById elementId  files      nFiles   oFiles length       for  var nFileId   0  nFileId  lt  nFiles  nFileId              nBytes    oFiles nFileId  size            var sOutput   nBytes     bytes          optional code for multiples approximation     for  var aMultiples     K    M    G    T    P    E    Z    Y    nMultiple   0  nApprox   nBytes   1024  nApprox  gt  1  nApprox    1024  nMultiple              sOutput          nApprox toFixed 3    aMultiples nMultiple                    return sOutput     lt  Javascript gt    lt HTML gt   lt input type  file  id  inputFileUpload  onchange  uploadFuncWithAJAX this value    size  25  gt   lt  HTML gt    lt Javascript with XMLHttpRequest gt  document getElementById  spanFileSizeText   innerHTML updateSize  inputFileUpload     lt  XMLHttpRequest gt    Cheers

User · Answer

JQuery example provided in this thread was extremely outdated  and google wasn t helpful at all so here is my revision     lt script type  text javascript  gt              image-file   on  change   function                 console log   this  0  files 0  name   file size is        this  0  files 0  size 1024 1024    Mb                     lt  script gt

User · Answer

No Yes  using the File API in newer browsers  See TJ s answer for details     If you need to support older browsers as well  you will have to use a Flash-based uploader like SWFUpload or Uploadify to do this   The SWFUpload Features Demo shows how the file size limit setting works   Note that this  obviously  needs Flash  plus the way it works is a bit different from normal upload forms

User · Answer

Yes  you can use the File API for this  Here s a complete example  see comments    x000D   x000D  document getElementById  btnLoad   addEventListener  click   function showFileSize             Can t use  typeof FileReader      function   because apparently it        comes back as  object  on some browsers  So just see if it s there        at all       if   window FileReader       This is VERY unlikely  browser support is near-universal         console log  The file API isn t supported on this browser yet             return             var input   document getElementById  fileinput        if   input files       This is VERY unlikely  browser support is near-universal         console error  This browser doesn t seem to support the  files  property of file inputs           else if   input files 0             addPara  Please select a file before clicking  Load           else           var file   input files 0           addPara  File     file name     is     file size     bytes in size               function addPara text        var p   document createElement  p        p textContent   text      document body appendChild p     x000D  body       font-family  sans-serif    x000D   lt form action     onsubmit  return false   gt   lt input type  file  id  fileinput  gt   lt input type  button  id  btnLoad  value  Load  gt   lt  form gt  x000D   x000D   x000D    Slightly off-topic  but  Note that client-side validation is no substitute for server-side validation  Client-side validation is purely to make it possible to provide a nicer user experience  For instance  if you don t allow uploading a file more than 5MB  you could use client-side validation to check that the file the user has chosen isn t more than 5MB in size and give them a nice friendly message if it is  so they don t spend all that time uploading only to get the result thrown away at the server   but you must also enforce that limit at the server  as all client-side limits  and other validations  can be circumvented

User · Answer

If you re using jQuery Validation  you could write something like this    validator addMethod       quot maxfilesize quot       function  value  element            if  this optional element       element files      element files 0                 return true            else               return element files 0  size  lt   1024   1024   2                        The file size can not exceed 2MiB

[javascript] JavaScript file upload size validation

Examples related to javascript

Examples related to validation

Examples related to file-upload