Вход файла JS onchange, onclick not firing

Question

Я пытаюсь заполнить ввод текста типа с именем файла, который был выбран. Из того, что я иногда читал, вам нужно установить значение «» или null onClick, затем onchange установить место.

Я пробовал много разных вариантов, но он просто не срабатывает. Что я не замечаю?

Мой очень простой пример ....

<script type="text/javascript"> 
    getElementById("upFile").onClick = function(){ 
     this.value = ""; 
    } 

    getElementById("upFile").onchange = function(){ 
     getElementById("uploadName").value = this.value; 
    } 
</script> 


    <input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title"> 
    <input type="file" id="upFile" name="upFile" enctype="multipart/form-data"><br> 

То, что я прочитал

Changing the placeholder text based on the users choice

Change placeholder text

Upload files using input type="file" field with .change() event not always firing in IE and Chrome

HTML input file selection event not firing upon selecting the same file

Ни один из которых, кажется, мой вопрос ...

Answer 1

Здесь вы идете. Вы можете избавиться от прослушивателя событий onclick и следить за изменениями. Элемент загрузки файла создает массив файлов, и вы можете получить доступ к нему, как так:

<input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title"> 
<input type="file" id="upFile" name="upFile" enctype="multipart/form-data"> 

<script> 
    document.getElementById("upFile").onchange = function(){ 
     // single file selection, get the first file in the array 
     document.getElementById("uploadName").value = this.files[0].name; 
    } 
</script> 

FYI: Это то, что происходит, если тег скрипта перед элементом. Он работает сценарий когда-то прочитал и говорит, что не может найти элемент, на который ссылается с document.getElementById("upFile")

Uncaught TypeError: Cannot set property 'onchange' of null at :2:48

Answer 2

У вас не хватает document.getElementById и OnClick должны быть OnClick