0

Имеется кастомный 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>

6
  • Посмотрите на stackoverflow.com похоже то, что вам нужно 26 авг 2020 в 7:36
  • Вы же в скрипте берете только имя первого файла, его и выводит 26 авг 2020 в 7:39
  • А как выбрать имена всех файлов?
    – fenq543
    26 авг 2020 в 7:40
  • Я же дал ссылку - там указано где можно посмотреть код - жать сюда 26 авг 2020 в 7:45
  • Не совсем понимаю что мне нужно изменить в моем скрипте
    – fenq543
    26 авг 2020 в 7:48

1 ответ 1

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>

3
  • Указывайте источник в своём ответе, а не в комментариях.
    – UModeL
    26 авг 2020 в 8:07
  • Да я не думал, что после указания двух ссылок, все равно придется код сюда закидывать ))) 26 авг 2020 в 8:09
  • Вы просто не понимаете принцип SO. Ваш комментарий был похож на "гугли получше". Если давать ссылку, то на ответ на этой же площадке, иначе человек просто уйдёт по ссылке, а вопрос будет висеть без ответов. К тому же, если сторонняя ссылка сломается, то станет бесполезна.
    – UModeL
    26 авг 2020 в 8:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.