Javascript 显示输入类型文件中的文件名-console.log（文件名）返回null

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

这是我的代码：

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

---

为什么

console.log（文件名）

返回

null

？

您可以使用以下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]);
    });

---

这里有一把工作小提琴：

您需要等待更改事件

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

---

演示：

您需要等待更改事件

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