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

这是一个老问题，但我还没有找到满足我需求的解决方案。更改“选择文件”按钮并继续显示文件名

首先，我想更改为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的）...

来源

2016-10-02 SoftTimur

出于安全原因，JS从不将所选文件的实际文件路径公开给浏览器。 – Terry

[如何使用javascript，jquery-ajax？]更改的所选文件的完整路径（http://stackoverflow.com/questions/15201071/how-to-get -full-path-of-selected-file-on-change-of-input-type-file-using-jav） – Terry

伙计们，我犯了一个错误，我想显示'文件名'而不是'文件路径'。 .. – SoftTimur

您可以创建一个函数在<input type="file">元素来处理change事件，创造一个<label>元素与for属性设置为input type="file"id，设置.webkitRelativePathFile对象的，对象File或.name元件input的.value属性，从最后\字符切片结束字符串，设置<label>元件的.innerHTML到得到的字符串

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>JS Bin</title> 
 
    \t <script type="text/javascript"> 
 
\t  function performClick(elemId) { 
 
\t  var elem = document.getElementById(elemId); 
 
\t  if(elem && document.createEvent) { 
 
\t  var evt = document.createEvent("MouseEvents"); 
 
\t  evt.initEvent("click", true, false); 
 
\t  elem.dispatchEvent(evt); 
 
\t  } 
 
\t  } 
 
     
 
     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 
 
         ); 
 
     } 
 
\t </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" />--> 
 

 
\t <input type="submit" id="u_button" name="u_button" value="Upload the file"><label for="file"></label> 
 
    </form> 
 
</body> 
 
</html>

来源

2016-10-03 00:05:04 guest271314

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

回答

相关问题