javascript - 在 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;

}