这是一个老问题,但我找不到满足我需求的解决方案。
首先,我想将Choose File
更改为另一种按钮样式(例如btn btn-primary
)。其次,在选择文件后,我仍然希望在屏幕上显示其名称,以便人们知道所选择的内容。
我在Chrome 53.0.2785.116
尝试了两个解决方案。它们确实更改了Choose File
的文本,但没有一个显示响应中的文件名:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function performClick(elemId) {
var elem = document.getElementById(elemId);
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
</script>
</head>
<body>
<form action="uploadfile.php" method="post" enctype="multipart/form-data">
<!-- http://stackoverflow.com/a/16015086/702977 -->
<a href="#" class="btn btn-primary" type="button" onclick="document.getElementById('file').click(); return false;">Browse</a> <input id="file" name="file" type="file" style="visibility: hidden; display: none;" />
<!-- http://stackoverflow.com/a/6463467/702977 -->
<!-- <a href="#" class="btn btn-primary" type="button" onclick="performClick('file');">Choose File</a><input type="file" name="file" id="file" style="position: fixed; top: -100em" />-->
<input type="submit" id="u_button" name="u_button" value="Upload the file">
</form>
</body>
</html>
这是JSBin
有没有人有解决方案?我也对非纯HTML解决方案持开放态度(例如,JQuery)......
答案 0 :(得分:0)
您可以创建一个函数来处理change
元素处的<input type="file">
事件,创建一个<label>
元素,for
属性设置为input type="file"
{{1} },设置id
对象的.webkitRelativePath
,File
对象File
或.name
元素的.value
属性,从上一个{{1}开始切片}字符到字符串结尾,将input
元素的\
设置为结果字符串
.innerHTML