更改“选择文件”按钮并继续显示文件名答案

【问题标题】：Change "Choose File" button and keep showing the file name更改“选择文件”按钮并继续显示文件名
【发布时间】：2017-02-10 21:12:57
【问题描述】：

这是一个老问题，但我还没有找到满足我需求的解决方案。

首先，我想将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）...

【问题讨论】：

出于安全原因，JS从不将所选文件的实际文件路径暴露给浏览器。
How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?的可能重复
各位，我搞错了，我想显示file name而不是file path...
您可以通过访问输入的value 属性来访问文件名。一些操作系统/浏览器可能会提供一个虚拟路径，因此您可能希望使用正则表达式来解析值以获取文件名。再说一次，这个问题之前有人问过：stackoverflow.com/questions/2189615/…。

标签： javascript jquery html css forms

【解决方案1】：

您可以在<input type="file"> 元素处创建一个处理change 事件的函数，创建一个<label> 元素并将for 属性设置为input type="file" id，设置.webkitRelativePath 的File 对象， , File 对象 .name 或 .value input 元素的属性，从最后一个 \ 字符到字符串末尾，将 <label> 元素的 .innerHTML 设置为结果字符串

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
  	  <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);
	    }
	    }
        
        function handleFile(elem) {
          console.log(elem.files[0].name, elem.value);
          document.querySelector("[for='file']")
          .innerHTML = elem.files[0].webkitRelativePath 
                       || elem.files[0].name
                       || elem.value.slice(
                           elem.value.lastIndexOf("\\") + 1
                          );
        }
	  </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;" onchange="handleFile(this)" />
    
    <!-- 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"><label for="file"></label>
  </form>
</body>
</html>

【讨论】：