在 HTML 输入字段中选择文件时显示确认信息

Question

我有一个标准输入字段：

<input type="file">

在我的表单中，但我将其隐藏，以便我可以使用自己的图像作为按钮（如 stackoverflow 上的许多答案所示）

但使用此方法时，不会向用户确认其文件已被选择，因为标准输入框是隐藏的，因此他们永远看不到文件名。

所以我的问题归结为：如何检测已选择文件，然后在页面上显示某些内容（而不是警报框）？理想情况下，我只想显示一个小图标或一些文字，表示“文件已选择”。

Jquery 很好，但如果有一种方法可以在没有它的情况下完成此操作，我会更喜欢它。谢谢！

Answer 1

这是一个非常简单的方法，无需使用 Jquery。当然，您必须更改 id 以匹配您的 html。

这是 jsfiddle 示例的链接：http://jsfiddle.net/larryjoelane/rrns0k4e/1/

HTML 部分：

<input id="file-select" type="file">

<div id="file-selected"></div>

JavaScript 部分：

//on change event listener for #file-select
document.getElementById("file-select").onchange = function() {

    //call getFileSelected method
    getFileSelected();

};

function getFileSelected(){

    //get the value of the input file element
    var getFileSelected = document.getElementById("file-select").value;

    //display the results of the input file element
    //you can append something before the getFileSelected value below
    //like an image tag for your icon or a string saying "file selected:"
    //for example.
    document.getElementById("file-selected").innerHTML = getFileSelected;

}