Введите имя результата выбора файла во входном теге

Question

В этой форме у меня есть имя файла поля, в котором я хочу, чтобы пользователь либо набрал желаемое имя файла, либо выбрал имя файла из своей файловой системы.Поэтому я хочу, чтобы он выбрал свой файл и затем имя файла, чтобы заполнить текст тега ввода.Это возможно?Можете ли вы увидеть какие-либо очевидные ошибки, которые я могу исправить?

<div class="modal-body">                                                     
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">File name</label>
            <div class="col-sm-9">
               <input type="text" class="form-control" name="name" id="modal-add-tech-file-name" required>
                   <span>
                       <form>
                            <label for="file-add-upload" class="custom-file-upload">
                                <i class="fa fa-cloud-upload"></i> Select file
                            </label>
                            <input id="file-add-upload" name='upload_cont_img' type="file" style="display:none;">
                       </form>
                  </span>
            </input>
        </div>
    </div>                         
</div> 

Это код из файла, который обрабатывает кнопки и выполняет запросы AJAX.

$('#file-add-upload').change(function() {
    var i = $(this).prev('label').clone();
    var file = $('#file-upload')[0].files[0].name;
    $('#modal-add-tech-file-name').val(data(file)); 
    //$("#modal-edit-tech-file-name").prev('label').text(file);
});

Answer 1

Вы ошиблись идентификатором.#file-upload даже не упоминается в вашем html.Я изменил его на #file-add-upload и получил имя файла с помощью $('#file-add-upload').val().После этого я просто устанавливаю имя файла как значение текстового поля, используя ваш код.Смотрите образец ниже.

$('#file-add-upload').change(function() {
    var filename = $('#file-add-upload').val();
    $('#modal-add-tech-file-name').val(filename); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
   <div class="form-group row">
      <label class="col-sm-3 col-form-label">File name</label>
      <div class="col-sm-9">
         <input type="text" class="form-control" name="name" id="modal-add-tech-file-name" required/>
         <span>
            <form>
               <label for="file-add-upload" class="custom-file-upload">
               <i class="fa fa-cloud-upload"></i> Select file
               </label>
               <input id="file-add-upload" name='upload_cont_img' type="file" style="display:none;"/>
            </form>
         </span>
      </div>
   </div>
</div>