Get file size before uploading

Question

Is there any way to find out the file size before uploading the file using AJAX   PHP in change event of input file

User · Answer

I had the same problem and seems like we haven't had an accurate solution. Hope this can help other people.

After take time exploring around, I finally found the answer. This is my code to get file attach with jQuery:

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);

This is just the example code for getting the file size. If you want do other stuffs, feel free to change the code to satisfy your needs.

User · Answer

Here s a simple example of getting the size of a file before uploading  It s using jQuery to detect whenever the contents are added or changed  but you can still get files 0  size without using jQuery    x000D   x000D    document  ready function     x000D        openFile   on  change   function evt    x000D      console log this files 0  size   x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form action  upload php  enctype  multipart form-data  method  POST  id  uploadform  gt  x000D     lt input id  openFile  name  img  type  file    gt  x000D   lt  form gt  x000D   x000D   x000D       Here s a more complete example  some proof of concept code to Drag and Drop files into FormData and upload via POST to a server  It includes a simple check for file size

User · Answer

Best solution working on all browsers     function GetFileSize fileid        try           var fileSize   0             for IE         if checkIE        we could use this   browser msie but since it s deprecated  we ll use this function                before making an object of ActiveXObject                  please make sure ActiveX is enabled in your IE browser             var objFSO   new ActiveXObject  Scripting FileSystemObject                var filePath           fileid  0  value              var objFile   objFSO getFile filePath               var fileSize   objFile size    size in b             fileSize   fileSize   1048576    size in mb                       for FF  Safari  Opeara and Others         else               fileSize           fileid  0  files 0  size   size in b             fileSize   fileSize   1048576    size in mb                    alert  Uploaded File Size is    fileSize    MB              catch  e            alert  Error is      e             from http   www dotnet-tricks com Tutorial jquery HHLN180712-Get-file-size-before-upload-using-jquery html  UPDATE    We ll use this function to check if it s IE browser or not  function checkIE         var ua   window navigator userAgent      var msie   ua indexOf  MSIE          if  msie  gt  0      navigator userAgent match  Trident  rv  11                    If Internet Explorer  return version number         alert parseInt ua substring msie   5  ua indexOf      msie            else              If another browser  return 0         alert  otherbrowser               return false

User · Answer

Personally  I would say Web World s answer is the best today  given HTML standards   If you need to support IE  lt  10  you will need to use some form of ActiveX   I would avoid the recommendations that involve coding against Scripting FileSystemObject  or instantiating ActiveX directly     In this case  I have had success using 3rd party JS libraries such as plupload which can be configured to use HTML5 apis or Flash Silverlight controls to backfill browsers that don t support those   Plupload has a client side API for checking file size that works in IE  lt  10

User · Answer

Please do not use ActiveX as chances are that it will display a scary warning message in Internet Explorer and scare your users away      If anyone wants to implement this check  they should only rely on the FileList object available in modern browsers and rely on server side checks only for older browsers  progressive enhancement    function getFileSize fileInputElement       if   fileInputElement value            typeof fileInputElement files      undefined             typeof fileInputElement files 0       undefined             typeof fileInputElement files 0  size      number                     File size is undefined          return undefined             return fileInputElement files 0  size

User · Answer

you need to do an ajax HEAD request to get the filesize  with jquery it s something like this    var req     ajax       type   HEAD       url  yoururl      success  function            alert  Size is     request getResponseHeader  Content-Length

User · Answer

You can by using HTML5 File API  http   www html5rocks com en tutorials file dndfiles   However you should always have a fallback for PHP  or any other backend language you use  for older browsers

User · Answer

ucefkh s solution worked best  but because   browser was deprecated in jQuery 1 91  had to change to use navigator userAgent   function IsFileSizeOk fileid        try           var fileSize   0            for IE         if  navigator userAgent match  msie i                   before making an object of ActiveXObject                 please make sure ActiveX is enabled in your IE browser             var objFSO   new ActiveXObject  Scripting FileSystemObject                var filePath           fileid  0  value              var objFile   objFSO getFile filePath               var fileSize   objFile size    size in b             fileSize   fileSize   1048576    size in mb                      for FF  Safari  Opeara and Others         else               fileSize           fileid  0  files 0  size   size in b             fileSize   fileSize   1048576    size in mb                    return  fileSize  lt  2 0             catch  e            alert  Error is      e

User · Answer

For the HTML bellow   lt input type  file  id  myFile    gt    try the following     binds to onchange event of your input field     myFile   bind  change   function          this files 0  size gets the size of your file    alert this files 0  size          See following thread   How to check file input size with jQuery

User · Answer

lt script type  text javascript  gt  function AlertFilesize        if window ActiveXObject           var fso   new ActiveXObject  Scripting FileSystemObject            var filepath   document getElementById  fileInput   value          var thefile   fso getFile filepath           var sizeinbytes   thefile size       else          var sizeinbytes   document getElementById  fileInput   files 0  size             var fSExt   new Array  Bytes    KB    MB    GB        fSize   sizeinbytes  i 0 while fSize gt 900  fSize  1024 i          alert  Math round fSize 100  100      fSExt i       lt  script gt    lt input id  fileInput  type  file  onchange  AlertFilesize       gt    Work on IE and FF

User · Answer

You can use PHP filesize function  During upload using ajax  please check the filesize first by making a request an ajax request to php script that checks the filesize and return the value

User · Answer

Browsers with HTML5 support has files property for input type   This will of course not work in older IE versions    var inpFiles   document getElementById   fileID    for  var i   0  i  lt  inpFiles files length    i        var size   inpFiles files item i  size      alert  File Size       size

User · Answer

x000D   x000D    document  ready function     x000D        openFile   on  change   function evt    x000D      console log this files 0  size   x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form action  upload php  enctype  multipart form-data  method  POST  id  uploadform  gt  x000D     lt input id  openFile  name  img  type  file    gt  x000D   lt  form gt  x000D   x000D   x000D

[javascript] Get file size before uploading

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to file-upload

Examples related to filesize