javascript - jQuery 将输入类型文件的值显示给其他元素

Question

我正在尝试向元素显示输入文件的值/名称。代码运行正常.. 但问题是当用户单击并选择一个文件时。该文件不会在用户选择文件时显示，而是在用户再次单击上传按钮时显示。那么我将如何使输入字段的值在用户做出选择时显示出来。

$(document).ready(function () {
    $(".filename").each(function () {
        $('.upload').click(function () {
            $('#file_button').click();
            var file = $('#file_button').val();
            if (file !== null) {
                if ($('.filename').val() !== null) {
                    $($('.filename')).empty();
                }
                $('<span>' + file + '</span>').appendTo('.filename');
            }
        });
    });
});

我的 CSS ：

#file_button {
   display: none;  
} 

// 然后向下去 css 上传按钮

HTML：

<button type="button" class="upload"> Upload a File </button>
<p class="filename"> </p>
<input type="file" id="file_button"/> 

Answer 1

检查这个...

演示小提琴

$(document).ready(function () {
    $(".filename").each(function () {
        $('.upload').click(function () {
            $('#file_button').click();

        });

        $("#file_button").change(function () {
            var file = $('#file_button').val();
            if (file !== null) {
                if ($('.filename').val() !== null) {
                    $($('.filename')).empty();
                }
                $('<span>' + file + '</span>').appendTo('.filename');
            }
        });
    });
});

Answer 2

$("#file_button").on('change',function(){
    alert('Selected');
});

然后确实希望通过替换警报来达到您的目的。