2016-08-08 56 views
1

感謝您查看我的問題。如何使用Javascript在表單中選擇文件時更改標籤文本

我問類似這樣的前手在下面的鏈接的問題。不幸的是,給出的答案適用於代碼片段,但不適用於我的網站。我創建了一個空白的HTML文檔,並在其中插入了以下代碼。我想要做的基礎是這個。文件輸入標籤將使用CSS隱藏。然後我使用標籤來接管輸入標籤的控制。一旦選擇了一個文件,我希望文件名(不是路徑)顯示在標籤內,並且也保持圖像對用戶可見。正如我在上一個問題中所述,我不希望使用jQuery。預先感謝您看看我的代碼並提供幫助!

繼承人我剛纔的問題:How do I change HTML Label Text Once File Has Been Selected using Javascript

繼承人的代碼我的「index2.php」文件:

<html> 
    <head> 
    <script> 
     var profilePic = document.getElementById('profilepic'); /* finds the input */ 

     function changeLabelText() { 
     var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */ 
     var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */ 
     profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */ 
     var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */ 
     if (profilePicValue !== '') { 
      profilePicLabelText.textContent = profilePicValue; /* changes the label text */ 
     } 
     } 

     profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */ 
    </script> 
    </head> 
<body> 
    <div class="changepic-wrap"> 
    <form action="changepicauth.php" method="post"> 
     <input type="file" name="profilepic" id="profilepic" class="inputfile"> 
     <br> 
     <label for="profilepic"> 
     <img src="#" /> 
     Upload Picture... 
     </label> 
     <br> 
     <div class="button-wrap"> 
     <button>Change Picture</button> 
     </div> 
    </form> 
    </div> 

</body> 
</html> 
+0

包裝你 「上傳圖片」 用' ...'並改變其'innerHTML'。 –

+0

我不想使用標籤。感謝您的建議,但那不是我想要做的。 –

回答

1

放置<script>...</script>在文檔的最後,只是</body>之前。

這樣,所有DOM將已經加載,您將不需要監聽onloadonDOMContentLoaded事件。

+1

你走了!我知道@Rounin會來解決問題!謝謝哥們! –

1

回首以前的問題,它的答案。我看到沒有檢查,看到DOM已加載。如果您在答案中複製並粘貼了該代碼,則無法在您的網站上正常工作。

嘗試使用這些中的一個:

document.addEventListener('DOMContentLoaded', function() { myFunction(); }); 

window.onload = myFunction(); 

<body onload="myFunction()"> <!-- in the html --> 

我推薦的第一選擇。您需要將爲您編寫的代碼封裝在函數內(如myFunction();),然後使用其中一種方法調用它。否則,代碼正在嘗試對尚未加載的DOM執行操作。

精心設計: 您需要將您的代碼放入onload函數中 - 這與您的名稱無關。

<script> 
    function myFunction(){ 
      var profilePic = document.getElementById('profilepic'); /* finds the input */ 

      function changeLabelText() { 
      var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */ 
      var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */ 
      profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */ 
      var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */ 
      if (profilePicValue !== '') { 
       profilePicLabelText.textContent = profilePicValue; /* changes the label text */ 
      } 
      } 
      profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */ 
    } 

window.onload = myFunction(); 
</script> 
+0

我嘗試了所有這些不同的方式,除了他們沒有工作。你能否使用我的changeLabelText()措辭讓你的答案更具體地針對我的問題,而不是使用函數()等通用的措辭。謝謝。 –

+0

即使在編輯之後,仍然無法正常工作。我的新代碼可以在這個pastebin中找到。 http://pastebin.com/iibrgqkS –

+0

你必須把所有的代碼在onload。你不想調用這個函數。試試我剛發佈的 – user3044394

0

我與其他人的幫助下在兩個問題終於已經得出的結論。這是可以在任何瀏覽器上工作的FINAL代碼。感謝你的幫助!

<html> 
    <body> 
    <div class="changepic-wrap"> 
     <form action="changepicauth.php" method="post"> 
     <input type="file" name="profilepic" id="profilepic" class="inputfile"> 
     <br> 
     <label for="profilepic"> 
      <img src="#" /> 
      Upload Picture... 
     </label> 
     <br> 
     <div class="button-wrap"> 
      <button>Change Picture</button> 
     </div> 
     </form> 
    </div> 

    <script> 
     var profilePic = document.getElementById('profilepic'); /* finds the input */ 

     function changeLabelText() { 
     var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */ 
     var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */ 
     profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */ 
     var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */ 
     if (profilePicValue !== '') { 
      profilePicLabelText.textContent = profilePicValue; /* changes the label text */ 
     } 
     } 


     profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */ 
    </script> 
    </body> 
</html> 
相關問題