Как установить имя загруженного файла для типа ввода: текст на javascript в html

Question

Я хочу добавить элемент управления загрузкой файлов на мою страницу html, как показано ниже.

<input class="form-control valid" id="rptScreenShot" type="text" style="float:left;" runat="server"
                               data-val="true" data-val-maxlength="The field Report Sample must be a string or array type with a maximum length of '600'." 
                               data-val-maxlength-max="600" value="" aria-invalid="false" />
<label class="btn btn-default btn-file">
    Browse <input class="form-control" id="upld_sample1" type="file" name="file_rptsample1" style="display: none;">
</label>

Что мне не удалось сделать, так это перехватить выбранный файл после того, как пользователь просмотрел файл, и установить для него значение rptScreenShot с помощью javascript или jquery. Любая помощь будет оценена.

Answer 1

Что-то вроде ниже?

$("#upld_sample1").on("change", function(e){
  console.log("Fileinfo:", e.target.files[0])
  $("#rptScreenShot").val(e.target.files[0].name)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control valid" id="rptScreenShot" type="text" style="float:left;" runat="server" data-val="true" data-val-maxlength="The field Report Sample must be a string or array type with a maximum length of '600'." data-val-maxlength-max="600"
  value="" aria-invalid="false" />
<label class="btn btn-default btn-file">
    Browse <input class="form-control" id="upld_sample1" type="file" name="file_rptsample1" style="display: none;">
</label>