Question

我有一个标准输入字段：

<input type="file">

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

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

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

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 Part：

//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;

}

Answer 2

如果您在元素上收听更改事件，您将知道何时选择了文件：

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

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

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

Answer 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="javascript:fileValidator();"/></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Upload"/></td>
                </tr>
            </table>
        </form>
    </body>
</html>

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

3 个答案: