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

检查一下......

Demo Fiddle

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

然后通过替换警报来实现您的目的。

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

2 个答案: