How to get file name when user select a file via input type file

Question

I ve seen similar questions before which ends up with no solution because of security reasons   But today I see hostmonster has successfully implemented this when I open a ticket and attach a file in their backend   It works both with firefox and IE version 8 to be exact    I ve verified it s exactly client side scripting no request is sent with firebug    Now can we re-consider this question

User · Accepted Answer

You can get the file name  but you cannot get the full client file-system path   Try to access to the value attribute of your file input on the change event   Most browsers will give you only the file name  but there are exceptions like IE8 which will give you a fake path like   C  fakepath myfile ext  and older versions  IE  lt   6  which actually will give you the full client file-system path  due its lack of security    document getElementById  fileInput   onchange   function        alert  Selected file      this value

User · Answer

You can use the next code   JS      function showname            var name   document getElementById  fileInput           alert  Selected file      name files item 0  name         alert  Selected file      name files item 0  size         alert  Selected file      name files item 0  type            HTML   lt body gt       lt p gt           lt input type  file  id  fileInput  multiple onchange  showname     gt       lt  p gt       lt  body gt

User · Answer

I ll answer this question via Simple Javascript that is supported in all browsers that I have tested so far  IE8 to IE11  Chrome  FF etc    Here is the code     x000D   x000D  function GetFileSizeNameAndType   x000D            x000D          var fi   document getElementById  file       GET THE FILE INPUT AS VARIABLE  x000D   x000D          var totalFileSize   0  x000D   x000D             VALIDATE OR CHECK IF ANY FILE IS SELECTED  x000D          if  fi files length  gt  0  x000D            x000D                 RUN A LOOP TO CHECK EACH SELECTED FILE  x000D              for  var i   0  i  lt   fi files length - 1  i    x000D                x000D                    ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION  IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE x000D                  var fsize   fi files item i  size  x000D                  totalFileSize   totalFileSize   fsize  x000D                  document getElementById  fp   innerHTML   x000D                  document getElementById  fp   innerHTML x000D                    x000D                    lt br   gt       File Name is  lt b gt     fi files item i  name x000D                    x000D                    lt  b gt  and Size is  lt b gt     Math round  fsize   1024     DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB x000D                    x000D                    lt  b gt  KB and File Type is  lt b gt     fi files item i  type     lt  b gt     x000D                x000D            x000D          document getElementById  divTotalSize   innerHTML    Total File s  Size is  lt b gt     Math round totalFileSize   1024      lt  b gt  KB   x000D        x000D       lt p gt  x000D           lt input type  file  id  file  multiple onchange  GetFileSizeNameAndType      gt  x000D       lt  p gt  x000D   x000D       lt div id  fp  gt  lt  div gt  x000D       lt p gt  x000D           lt div id  divTotalSize  gt  lt  div gt  x000D       lt  p gt  x000D   x000D   x000D     Please note that we are displaying filesize in KB  Kilobytes   To get in MB divide it by 1024   1024 and so on    It ll perform file outputs like these on selecting

User · Answer

just tested doing this and it seems to work in firefox  amp  IE   lt html gt       lt head gt           lt script type  text javascript  gt              function alertFilename                                 var thefile   document getElementById  thefile                    alert thefile value                          lt  script gt       lt  head gt       lt body gt           lt form gt               lt input type  file  id  thefile  onchange  alertFilename      gt               lt input type  button  onclick  alertFilename    value  alert    gt           lt  form gt       lt  body gt   lt  html gt

[javascript] How to get file name when user select a file via <input type="file" />?

Examples related to javascript

Examples related to html

Examples related to file