Блог

Главная - Вопросы по программированию - Как получить значение типа файла и добавить тип файла вместе со значением с помощью jQuery?

Как получить значение типа файла и добавить тип файла вместе со значением с помощью jQuery?

#javascript #html #jquery #file-upload

Вопрос:

У меня есть одна кнопка на моей странице под названием Add more fields . Когда пользователь нажмет на кнопку, откроется модальный загрузчик с полями «Имя метки» и «Загрузка файла». Пользователь может добавить имя метки и файл.

Пользователь может добавлять несколько раз. Независимо от того, что пользователь добавляет в имя метки и загружает файл, который я отображаю на странице с помощью приложения jQuery.

Теперь моя проблема в том, что я могу правильно добавлять данные, но я не получаю имя файла, загруженного пользователем.

Как только я получу имя метки и файл, я вставлю данные в базу данных.

Я знаю, что с моим сценарием есть какая-то проблема. Что я могу сделать, чтобы решить эту проблему?

введите описание изображения здесь

 $(".clicktoaddfile").click(function() {

  var labelname = $('#labelname').val();
  var filename=$("#newfileuploaded")[0].files[0]['name'];
  var html = '<div class="col-lg-3"><label>'   labelname   '<label><div class=""><input type="file" value='   filename   '></div></div>';
  $('#appendhere').append(html);

  $('#labelname').val('');
  $('#newfileuploaded').val('');
}); 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form>
  <div class="row" id="appendhere"></div>
  <input type="submit" name="">
</form>


<div class="w-100 text-center pt-3 pb-4">
  <a href="javascript:void(0);" class="addcustomDoc" data-bs-toggle="modal" data-bs-target="#modal-customDoc">  Add Custom Document</a>
</div>


<div class="modal fade" id="modal-customDoc" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Document Upload</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="form-group mt-4">
          <label for="labelname" class="form-label">Type of Document</label>
          <input type="text" name="labelname" class="form-control" id="labelname" placeholder="name">
        </div>
        <div class="form-group mt-4">
          <div class="documentUploadWrap">
            <div class="upload_doc">
              <div class="closefile"> <a href="javascript:void(0)" class="close_img"><i class="fas fa-times"></i></a></div>
              <input type="file" name="uploadfile[]" class="fileupload" id="newfileuploaded">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn themeBg clicktoaddfile">Add Document</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Метки: