Muli Muli - 3 months ago 7
jQuery Question

Get file name with Jquery

I want to get the file name that i upload and show it in my

<span>
.
this is my code:

var filename = $('#image_file').val();
$('#select_file').html(filename);

<div class="container-input-custom">
<div class="upload-btn">
<span id="select_file"></span>
<label for="file-upload"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></label>
<input type="file" id="image_file">
</div>
</div>

Answer

This is some simple example. I hope this will help to you:

$(document).ready(function() {
  $("#image_file").on("change", function() {
     $("#select_file").html(this.value);
  });
});

Edit: Only now I realized what the problem is. So this is the code:

$(".upload-btn").one("click", function _handler(event) {
        _handler.oldContext = this;
        var _file = $(this).find("input[type='file']").one("change", function() {
        var oldContext =    $(_handler.oldContext);
            oldContext.find("span#select_file").html(this.value);
        $(this).attr("display", "none"); 
        oldContext.one("click", _handler); 
    });
    _file.attr("display","block").trigger("click");
    event.stopPropagation();
});

and this is working jsfiddle:

https://jsfiddle.net/qpo8dwf9/33/

Edit2: This is working example with two inputs and attach listeners on document ready.

https://jsfiddle.net/qpo8dwf9/38/

Edit3: There is issues under Chrome and Chromium with fakepath. This is the last version. https://jsfiddle.net/qpo8dwf9/49/