Question

我正在尝试从输入类型文件中显示文件名。

这是我的代码：

<input id="id_file_field" name="file_field" type="file" style="display:none" />

这里 jQuery：

$(document).ready(function () {
    $("#upload_file").click(function () {
        $("#id_file_field").trigger('click');
        var path = $("#id_file_field").val();
        var fileName = path.match(/[^\/\\]+$/);
        console.log(fileName);
    });
});

为什么console.log(fileName)会返回null？

Answer 1

您需要等待更改事件

$(document).ready(function () {
    $("#upload_file").click(function () {
        $("#id_file_field").trigger('click');
    });
    $('#id_file_field').change(function () {
        var value = this.value;
        var fileName = typeof value == 'string' ? value.match(/[^\/\\]+$/)[0] : value[0]
        console.log(fileName);
    })
});

演示：Fiddle

Answer 2

您可以使用以下js;

$("#upload_file").click(function () {
        $("#id_file_field").trigger('click');
    });

    $('#id_file_field').change(function () {
        var value = $(this).val();
        var name = value.split(/[\\/]/);
        console.log(name[name.length - 1]);
    });

这是一个工作小提琴： http://jsfiddle.net/cubuzoa/BKuLT/3/

从输入类型文件显示文件名 - console.log（fileName）返回null

2 个答案: