更改"选择文件"按钮并继续显示文件名

时间:2016-10-02 23:50:08

标签: javascript jquery html css forms

这是一个老问题,但我找不到满足我需求的解决方案。

首先,我想将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)......

1 个答案:

答案 0 :(得分:0)

您可以创建一个函数来处理change元素处的<input type="file">事件,创建一个<label>元素,for属性设置为input type="file" {{1} },设置id对象的.webkitRelativePathFile对象File.name元素的.value属性,从上一个{{1}开始切片}字符到字符串结尾,将input元素的\设置为结果字符串

.innerHTML