使用jQuery从输入[type =’file’]获取文件名

这是上传的表单。

<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>

我使用以下脚本打开一个带有文件的窗口。我想在< b id ='select_file'>中显示文件名。

我如何做到这一点？

$('#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);
});

解决方法

你必须对输入类型文件的change事件这样做：

$('#select_file').click(function() {
    $('#image_file').show();
    $('.btn').prop('disabled',false);
    $('#image_file').change(function() {
        var filename = $('#image_file').val();
        $('#select_file').html(filename);
    });
});​