Skip to content

Instantly share code, notes, and snippets.

@sealucky7
Created June 27, 2017 09:30
Show Gist options
  • Save sealucky7/67f38232b9e614c94d51975e37e42870 to your computer and use it in GitHub Desktop.
Save sealucky7/67f38232b9e614c94d51975e37e42870 to your computer and use it in GitHub Desktop.
<!-- HTML -->
<div class="file-attach">
<div class="attach-link">Прикрепить файл</div>
<div class="file-name">Выберите файл</div>
<input type="file" name="attachmentFile">
</div>
<!-- CSS -->
.file-attach {
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
position: relative;
}
.attach-link {
display: block;
font-size: 20px;
text-decoration: underline;
color: #ffffff;
width: 100%;
top: -3px;
text-align: center;
position: absolute;
cursor: pointer;
}
.file-attach .file-name {
text-overflow: ellipsis;
overflow: hidden;
position: absolute;
top: 26px;
width: 100%;
font-size: 16px;
color: #ffffff;
}
.file-attach input[type='file'] {
opacity: 0;
height: 48px;
position: absolute;
top: -22px;
left: 0;
right: 0;
width: 100%;
cursor: pointer;
}
<!-- Javascript -->
$('form input[type=file]').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$(this).parent(".file-attach").find('.file-name').text(file_name);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment