Get filename from input type file using jQuery

Question

This is the uploaded form    lt form class  alert alert-info  gt       lt div gt           lt b id    select file  class  span3  style  font-weight  bold  cursor  pointer    gt Please select image lt  b gt           lt input class  span3  type  file  name  image file  id  image file  style  display none     gt           lt input disabled  true  type  button  value  Upload image  class  btn    gt       lt  div gt   lt  form gt    I use the following script to open a window with files  I want to show a file name in  lt b id    select file  gt    How can I do this       select file   click function        var  this     this           image file   show   focus   click   hide         var filename       image file   val         this html filename            btn   attr  disabled   false

User · Answer

This was a very important issue for me in order for my site to be multilingual. So here is my conclusion tested in Firefox and Chrome.

jQuery trigger comes in handy.

So this hides the standard boring type=file labels. You can place any label you want and format anyway. I customized a script from http://demo.smarttutorials.net/ajax1/. The script allows multiple file uploads with thumbnail preview and uses PHP and MySQL.

<form enctype="multipart/form-data" name='imageform' role="form"    ="imageform" method="post" action="upload_ajax.php">
    <div class="form-group">
        <div id="select_file">Select a file</div>
        <input class='file' type="file" style="display: none " class="form-control" name="images_up" id="images_up" placeholder="Please choose your image">
        <div id="my_file"></div>
        <span class="help-block"></span>
    </div>
    <div id="loader" style="display: none;">
        Please wait image uploading to server....
    </div>
    <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/>
</form>

$('#select_file').click(function() {
    $('#images_up').trigger('click');
    $('#images_up').change(function() {
        var filename = $('#images_up').val();
        if (filename.substring(3,11) == 'fakepath') {
            filename = filename.substring(12);
        } // Remove c:\fake at beginning from localhost chrome
        $('#my_file').html(filename);
   });
});

User · Answer

There is no jQuery function for this  You have to access the DOM element and check the files property   document getElementById  image file   files 0     Or      image file   0  files 0

User · Answer

Try this to Get filename from input  type  file   using jQuery    lt script type  text javascript  gt        document  ready function               input type  file     change function e               var fileName   e target files 0  name              alert  The file      fileName       has been selected                          lt  script gt    Taken from   jQueryPot

User · Answer

Using Bootstrap  Remove form-control-file Class from input field to avoid unwanted horizontal scroll bar   Try this     x000D   x000D      upload   change function     x000D      var filename       upload   val    x000D      if  filename substring 3 11      fakepath     x000D          filename   filename substring 12   x000D           For Remove fakepath x000D         label for  file name   b   html filename   x000D         label for  file default     text  Selected File      x000D      if  filename          x000D             label for  file default     text  No File Choosen    x000D        x000D      x000D   custom file   x000D    margin  auto  x000D    opacity  0  x000D    position  absolute  x000D    z-index  -1  x000D    x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  form-group  gt  x000D      lt label for  upload  class  btn btn-sm btn-primary  gt Upload Image lt  label gt  x000D       lt input type  file  class  text-center form-control-file custom file  id  upload  name  user image  gt  x000D       lt label for  file default  gt No File Choosen  lt  label gt  x000D       lt label for  file name  gt  lt b gt  lt  b gt  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

var file       YOURID  gt  input type  file      file value       filename will be    In Chrome  it will be something like C  fakepath FILE NAME or undefined if no file was selected   It is a limitation or intention that the browser does not reveal the file structure of the local machine

User · Answer

Getting the file name is fairly easy  As matsko points out  you cannot get the full file path on the user s computer for security reasons    var file       image file   0  files 0  if  file     console log file name

User · Answer

If selected more 1 file      input type  file     change function        var files      input type  file     prop  files       var names     map files  function val    return val name             some div   text names         files will be a FileList object  names is an array of strings  file names

User · Answer

filetosend   prop  files   0

User · Answer

This isn t possible due to security reasons  At least not on modern browsers  This is because any code getting access to the path of the file can be considered dangerous and a security risk  Either you ll end up with an undefined value  an empty string or an error will be thrown   When a file form is submitted  the browser buffers the file temporarily into an upload directory and only the temporary file name of that file and basename of that file is submitted

User · Answer

You can access to the properties you want passing an argument to your callback function  like evt   and then accessing the files with it  evt target files 0  name        document   ready function         main   append   lt input type  file  name  photo  id  upload-photo   gt           upload-photo   on  change  function evt        alert evt target files 0  name

User · Answer

You have to do this on the change event of the input type file this way       select file   click function             image file   show            btn   prop  disabled   false           image file   change function             var filename       image file   val                select file   html filename

[jquery] Get filename from input [type='file'] using jQuery

Examples related to jquery