JQUERY кнопка для загрузки файла

Последнее обновление на 29.01.2023

JQUERY CSS для кнопки загрузки или отправки файлов

 function uploadFile(target) {
  document.getElementById("new-df-fake").innerHTML = target.files[0].name;
}

Код CSS

.new-buttondown {
  position: relative;
}
 
.new-df {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
 
.new-df-buttondown {

/*ваш стиль */
}
 
#new-df-fake {
  height: 32px;
  width: 150px;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  padding: 0 15px;
  border: 1px solid #c7c7c7;
  border-radius: 3px;
  border-right: none;
  overflow-x:hidden; /* текст не выходил за границы */ 
  float: left;

}
 
.new-df-button {
  width: 150px;
  height: 32px;
  background: orange;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;   
  -webkit-box-pack: center;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}

Код html

<div class="new-buttondown">
   <input name="file" type="file" name="file" id="new-df-2" class="new new-df"  onchange='uploadFile(this)'>      
   <label class="new-df-buttondown" for="new-df-2">
     <div id="new-df-fake">Файл не выбран</div>
     <div class="new-df-button">Выберите файл</div>
   </label>
      
</div>

Демонстрация работы кнопки отправки файлов

Ваш комментарий будет первым

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *