在 HTML 输入字段中选择文件时显示确认
Posted
技术标签:
【中文标题】在 HTML 输入字段中选择文件时显示确认【英文标题】：Display confirmation when file has been selected in HTML input field 【发布时间】：2015-01-02 22:56:18 【问题描述】：我有一个标准输入字段：
<input type="file">
在我的表单中，但我将其隐藏，以便我可以将自己的图像用于按钮（如 *** 上的许多答案所示）
但是当使用这种方法时，没有向用户确认他们的文件被选中，因为标准输入框是隐藏的，所以他们永远看不到文件名。
所以我的问题归结为：如何检测到文件已被选中，然后在页面上显示一些内容（不是警告框）？理想情况下，我只想显示一个小图标或一些说明“文件已选择”的文字。
Jquery 很好，但如果没有它有办法做到这一点，我会更喜欢它。谢谢！
【问题讨论】：
如果您要求一种不使用 jQuery 或 javascript（是的，包含 jQuery）的方法，您不能。您必须使用一个脚本来监听输入字段的变化。 【参考方案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>【讨论】：
以上是关于在 HTML 输入字段中选择文件时显示确认的主要内容，如果未能解决你的问题，请参考以下文章