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

【问题标题】：Display confirmation when file has been selected in HTML input field在 HTML 输入字段中选择文件时显示确认
【发布时间】：2015-01-02 22:56:18
【问题描述】：

我有一个标准输入字段：

<input type="file">

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

但是当使用这种方法时，没有向用户确认他们的文件被选中，因为标准输入框是隐藏的，所以他们永远看不到文件名。

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

Jquery 很好，但如果没有它有办法做到这一点，我会更喜欢它。谢谢！

【问题讨论】：

如果您要求一种不使用 jQuery 或 JavaScript（是的，包含 jQuery）的方法，您不能。您必须使用一个脚本来监听输入字段的变化。

标签： javascript jquery html css forms

【解决方案1】：

如果你在元素上监听 change 事件，你就会知道文件何时被选中：

$('input').change(function(){
    console.log($(this).val());
});

如果你想显示文件名，你可以使用$(this).val()。如果你不想使用 jQuery，你正在寻找 onchange 事件。

小提琴：http://jsfiddle.net/cphutg90/

【讨论】：

【解决方案2】：

这是一种非常简单的方法，无需使用 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;

}

【讨论】：

这正是我想要的，谢谢！我希望我可以投票，但我还没有 15 声望，对不起！
没问题我很高兴它有帮助

【解决方案3】：

这是您正在查看的代码。要获得更好的 UI 性能，请查看 Internet Explorer 8+

HTML 和 JavaScript：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>File Picker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">
            function fileValidator()
            {
                var fileName=document.forms["FileForm"]["fileName"].value.replace("C:\\fakepath\\", "");
                var response=confirm("Are you sure to Upload '"+fileName+"'?");
                console.log(response);
                if(response==false)
                {
                   document.forms["FileForm"]["fileName"].value="";
                }
            }
        </script>
    </head>
    <body>
        <form name="FileForm" action="" method="Post">
            <table>
                <tr>
                    <td><input type="file" name="fileName" onchange="fileValidator();"/></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Upload"/></td>
                </tr>
            </table>
        </form>
    </body>
</html>

【讨论】：