jQuery get the file name selected from input type file

Question

This code should work in IE  don t even test it in Firefox   but it doesn t  What I want is to display the name of the attached file  Any help    lt html gt   lt head gt     lt title gt example lt  title gt         lt script type  text javascript  src     js jquery js  gt  lt  script gt     lt script type  text javascript  gt              document  ready  function                          attach   after   lt input id  fakeAttach  type  button  value  attach a file    gt                     fakeAttach   click function                             attach   click                        maxSize   after   lt div id  temporary  gt  lt span id  attachedFile  gt  lt  span gt  lt input id  remove  type  button  value  remove    gt  lt  div gt                         attach   change function                  fakeAttach   attr  disabled   disabled                            attachedFile   html   this  val                                     remove   click function e             e preventDefault                  attach   replaceWith     attach   clone                   fakeAttach   attr  disabled                     temporary   remove                                     lt  script gt    lt  head gt   lt body gt     lt input id  attach  type  file    gt  lt span id  maxSize  gt  less than 1MB  lt  span gt       lt  body gt   lt  html gt

User · Answer

The simplest way is to simply use the following line of jquery, using this you don't get the /fakepath nonsense, you straight up get the file that was uploaded:

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

Some other useful commands are:

To get the name of the file:

$('input[type=file]')[0].files[0].name; // This gets the file name

To get the type of the file:

If I were to upload a PNG, it would return image/png

$("#imgUpload")[0].files[0].type

To get the size (in bytes) of the file:

$("#imgUpload")[0].files[0].size

Also you don't have to use these commands on('change', you can get the values at any time, for instance you may have a file upload and when the user clicks upload, you simply use the commands I listed.

User · Answer

input type file    change function e         this  parents   parent-selector   find   element-to-paste-filename   text e target files 0  name         This code will not show C  fakepath  before file name in Google Chrome in case of using  val

User · Answer

Add a hidden reset button     lt input id  Reset1  type  reset  value  reset  class  hidden    gt    Click the reset button to clear the input       Reset1   click

User · Answer

get file input var  el      input type file       set the next siblings  the span  text to the input value   el next   text   el val

User · Answer

I had used following which worked correctly        fileAttached   attr  value       attachment   val

User · Answer

It is just such simple as writing      input type file    val     Anyway  I suggest using name or ID attribute to select your input  And with event  it should look like this      input type file    change function e      in   this      in next   html  in val

User · Answer

lt input onchange  readURL this     type  file  name  userfile    gt   lt img src    id  viewImage   gt   lt script gt   function readURL fileName        if  fileName files  amp  amp  fileName files 0             var reader   new FileReader             reader onload   function  e                    viewImage                        attr  src   e target result                       width 150  height 200                       reader readAsDataURL fileName files 0             lt  script gt

User · Answer

lt input onchange  readURL this     type  file  name  userfile    gt   lt img src    id  blah   gt   lt script gt   function readURL input        if  input files  amp  amp  input files 0             var reader   new FileReader             reader onload   function  e                    blah                        attr  src   e target result                       width 150  height 200                       reader readAsDataURL input files 0              console log reader             alert reader readAsDataURL input files 0              lt  script gt

[jquery] jQuery: get the file name selected from <input type="file" />

Examples related to jquery

Examples related to events

Examples related to copy

Examples related to file-io