<form method="post" enctype="multipart/form-data" class="popup">

        <div class="popup_pd">
          <p class="text-field">Ваше имя <input type="text" name="name" placeholder="Введите ваше имя" class="input-field" value=""></p>
          
          <p class="text-field">Эл почта <input type="email" name="email" placeholder="Введите ваш email" class="input-field"></p>
                <p class="text-field">Телефон <input id="phone_raschet" type="text" name="phone" placeholder="Введите ваш номер телефона" class="input-field" value=""></p>
          
          
          
          
          <p class="text-field">Комментарий <input type="text" name="message" placeholder="Напишите комментарий" class="input-field"></p>
          
          
          
          <p class="text-field">Прикрепить файл 
            <input name="image" type="file" id="input__file" class="input input__file input-field" multiple>
            <label for="input__file" class="input__file-button">
              <span class="input__file-icon-wrapper"><img class="input__file-icon" src="https://svgshare.com/i/_PN.svg" alt="Выбрать файл" width="20"></span>
              <span class="input__file-button-text" id="input__tfile"></span>
            </label>
          </p>
        
              </div>
              <div class="button-background">
                <input class="light-button send-button" name="callback" type="submit" value="Отправить">
              </div>
            </form>
.input__file-icon-wrapper {
    height: 30px;
    width: 30px;
    margin-right: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-right: 1px solid #fff;
}

.input__file {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.input__file-button {
    width: 100%;
    height: 35px;
    background-color: #ebebeb;
    border: 1px solid #ebebeb;
    color: rgba(128,128,128,);
    font-size: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    cursor: pointer;
}

.input__file-button-text {
    line-height: 1;
    margin-top: 1px;
}
    (function(){
    
    
      let inputs = document.querySelectorAll('#input__file');
    Array.prototype.forEach.call(inputs, function (input) {
      let label = input.nextElementSibling,
        labelVal = label.querySelector('#input__tfile').innerText;

      input.addEventListener('change', function (e) {
        let countFiles = '';
        if (this.files && this.files.length >= 1)
          countFiles = this.files.length;

        if (countFiles)
          label.querySelector('#input__tfile').innerText = 'Выбрано файлов: ' + countFiles;
        else
          label.querySelector('#input__tfile').innerText = labelVal;
      });
    }); 
      
})();  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.