更改「選擇文件」按鈕並繼續顯示文件名

這是一個老問題，但我還沒有找到滿足我需求的解決方案。更改「選擇文件」按鈕並繼續顯示文件名

首先，我想更改爲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

更改「選擇文件」按鈕並繼續顯示文件名

回答

相關問題