感謝您查看我的問題。如何使用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>
包裝你 「上傳圖片」 用' ...'並改變其'innerHTML'。 –
我不想使用標籤。感謝您的建議,但那不是我想要做的。 –