Как выводить все названия прикрепленных файлов?

Question

Имеется кастомный input type="file". JS скриптом подставляю имя прикрепленных файлов, но отображается имя только одного файла, а не всех.

var fileUpload = function () {
        $(".file-upload input[type=file]").change(function () {
            var filename = $(this).val().replace(/.*\\/, "");
            $(this).closest('.file-upload').find('.file-upload__btn_text').html(filename);
        });
    };
    
    fileUpload();

.file-upload {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.file-upload__icon {
    width: 16px;
    height: 16px;
    fill: #ff2840;
}
.file-upload__btn {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
    height: 20px;
    overflow: hidden;
    position: relative;
    width: 200px;
}
.file-upload__btn_text {
    padding-left: 10px;
    color: #3c3c3c;
}
.file-upload__btn_label,
.form-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.file-upload__btn_label {
    cursor: pointer;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.file-upload__btn input[type=file], .mfp-loading.mfp-figure, .mfp-s-error .mfp-content, .mfp-s-ready .mfp-preloader {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="file-upload">
                <div class="file-upload__btn">
                  <label class="file-upload__btn_label">
                    <input type="file" name="myfile[]" multiple id="myfile">
                    <svg class="svg-sprite-icon icon-file-upload file-upload__icon">
                      <use xlink:href="images/svg/sprite/symbol/sprite.svg#file-upload"></use>
                    </svg>
                    <span class="file-upload__btn_text">Прикрепить файл</span>
                  </label>
                </div>
              </div>

Answer 1

Все просто How to add/upload/choose multiple files from one input tag?:

$(function(){
  let inputFile = $('#myInput');
  let button = $('#myButton');
  let filesContainer = $('#myFiles');
  let files = [];
  
  inputFile.change(function() {
    let newFiles = []; 
    for(let index = 0; index < inputFile[0].files.length; index++) {
      let file = inputFile[0].files[index];
      newFiles.push(file);
      files.push(file);
    }
    
    newFiles.forEach(file => {
      let fileElement = $(`<p>${file.name}</p>`);
      fileElement.data('fileData', file);
      filesContainer.append(fileElement);
      
      fileElement.click(function(event) {
        let fileElement = $(event.target);
        let indexToRemove = files.indexOf(fileElement.data('fileData'));
        fileElement.remove();
        files.splice(indexToRemove, 1);
      });
    });
  });
  
  button.click(function() {
    inputFile.click();
  });
});

/* Put your css in here */

h1 {
  color: red;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <input id="myInput" type="file" multiple style="display:none" />
    
    <button id="myButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">+ Add Files</button>

    
    <div id="myFiles"></div>
  </body>

</html>

БЛОГ НА HUSL

Как выводить все названия прикрепленных файлов?

Ответы (1 шт):