Как изменить текст ярлыка HTML Как только файл был выбран с помощью Javascript

Question

Спасибо, что посмотрели мой вопрос. У меня есть форма ниже, у которой есть поле ввода файла. Безопасно сказать, что я скрыл это поле ввода, и теперь я использую метку в качестве основной «кнопки» для выбора файлов. Когда пользователь нажимает на ярлык «Загрузить изображение ...», я хочу, чтобы текст внутри метки менялся с «Загрузить изображение ...» на имя файла. Я следую этому руководству ниже, однако написанный javascript (в учебнике) предназначен для того, чтобы несколько файлов могли быть выбраны пользователем. Я только разрешаю своим пользователям выбирать ОДИН файл. Это изменение страницы вашего профиля, чтобы дать представление о том, что делает эта форма.

Вот код:

<!-- Change Picture Form --> 
      <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="/images/profile/upload.png" /> 
        Upload Picture... 
       </label> 
       <br> 
       <div class="button-wrap"> 
        <button>Change Picture</button> 
       </div> 
       </form> 
      </div> 

Вот учебник:

http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Может кто-нибудь объяснить мне, что я должен делать? Я что-то думаю по строкам eventlistener, но я не уверен в javascript. Я сторонний разработчик и очень мало знаю о javascript. Я НЕ ХОЧУ ИСПОЛЬЗОВАТЬ JQUERY. Прямой javascript только.

Еще раз спасибо за помощь Члены StackOverflow! : D

Редактировать: Некоторые люди говорят, что текст уже меняется. Это не ... Я хочу изменить текст LABEL. Тег «File Input» имеет две части. Кнопка и текст рядом с кнопкой. Я скрыл входной тег, используя следующий код SASS. Таким образом отображается только текст надписи «Загрузить изображение ...». Обязательно добавьте этот код SASS в свой файл, чтобы вы могли видеть, что текст LABEL не изменяется.

.inputfile 
     width: 0.1px 
     height: 0.1px 
     opacity: 0 
     overflow: hidden 
     position: absolute 
     z-index: -1 

Answer 1

Вы можете использовать яваскрипт onchange события, чтобы обнаружить, когда значение #profilepicinput изменений.

Когда это произойдет, вы можете захватить новый value в #profilepicinput и заменить текст метки с этим value.

Пример:

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 */

<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="/images/profile/upload.png" /> 
 
Upload Picture... 
 
</label> 
 
<br> 
 
<div class="button-wrap"> 
 
<button>Change Picture</button> 
 
</div> 
 
</form> 
 
</div>

Answer 2

Вы можете использовать change событие, выберите элемент, имеющий for значение атрибута, равное event.target: #profilepic элемент id, установить .innerHTML выбранного элемента к event.target.files[0].name

document.getElementById("profilepic") 
 
.addEventListener("change", function(e) { 
 
    document.querySelector("[for=" + e.target.id + "]") 
 
    .innerHTML = e.target.files[0].name; 
 
})

.inputfile { 
 
    width: 0.1px; 
 
    height: 0.1px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<!-- Change Picture Form --> 
 
<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="/images/profile/upload.png" />Upload Picture... 
 
    </label> 
 
    <br> 
 
    <div class="button-wrap"> 
 
     <button>Change Picture</button> 
 
    </div> 
 
    </form> 
 
</div>