dido dido - 2 months ago 10
jQuery Question

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

This is the uploaded form.

<form class="alert alert-info">
<div>
<b id = "select_file" class="span3" style="font-weight: bold; cursor: pointer; ">Please select image</b>
<input class="span3" type="file" name="image_file" id="image_file" style="display:none " />
<input disabled="true" type="button" value="Upload image" class="btn" />
</div>
</form>


I use the following script to open a window with files. I want to show a file name in
<b id = 'select_file'>
.

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);
});

Jai Jai
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);
    });
});‚Äč
Comments