Как сделать так, чтобы когда удалялся файл (при нажатии на кнопку удалить) удалялось или менялось фейковое имя на "Файл не выбран"?
Как сделать так, чтобы когда удалялся файл (при нажатии на кнопку удалить) удалялось или менялось фейковое имя на "Файл не выбран" ? Сделала форму отправки, стилизовала инпут, кнопку и сделала так же, фейковое имя файла, когда прикрепляю какой-нибудь файл, имя меняется на имя файла, все хорошо, но когда нажимаю на кнопку удалить, файл удаляется, но имя файла остается прежним, а нужно, чтобы оно пропало, а лучше, чтобы менялось на "Файл не выбран" Подскажите кто-нибудь, пожалуйста
$(document).ready(function() {
$('input[type="file"]').change(function(e) {
var nameFile = e.target.files[0].name;
$(".name-file").text(nameFile);
});
$('body').on('click','#delete',function() {
alert('Вы действительно хотите удалить файл?');
$("#nameFile")[0].value = "";
});
});
.file__options {
display: flex;
}
.file__item {
position: relative;
}
.name-file {
font-size: 15px;
margin-bottom: 13px;
}
.file__delite {
font-size: 13px;
color: #E53535;
border-bottom: 1px solid #E53535;
display: inline;
margin-bottom: 14px;
}
.file__delite:hover {
color: #c82e2e;
border-bottom: 1px solid #c82e2e;
}
.file__btn {
border: 1px dashed rgba(255, 255, 255, 0.26);
padding: 12px 183px;
display: inline-flex;
border-radius: 10px;
color: #fff;
background: #363A4D;
height: 43px;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 400;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="file">
<div class="file__options d-flex justify-content-between">
<a href="#" class="name-file">Файл не выбран</a>
<a class="file__delite" id="delete">
Удалить фото
</a>
</div>
<div class="file__item">
<input id="nameFile" accept=".jpg, .png, .gif" type="file" name="image" class="file__input">
<button class="file__btn">Загрузить фото товара</button>
</div>
</div>