Стилизованная форма загрузки

16.11.2021 01:57:43 pm

Загорелось мне изменить свою старую форму загрузки фотографий на стене. Выглядит она не современно и убого... Поискав в интернете, подобрал для себя один вариант, кое что поправил/дописал, внедрил код на сайт. И сейчас покажу Вам код который я использую.

HTML код:

	<div id="divFileInput">
		<input type="file" name:"image[]" id="global_attachment_photo_file_input" value="" onchange="$buttonSubmitActive = true; $('.activity_feed_form_button .button').removeClass('button_not_active');" />
		<label for="global_attachment_photo_file_input" class="file_button">
			<span class="file_ico_upload"><i class="ico ico-upload-cloud"></i></span>
			<span id="file_button_text">Выберите фотографию для загрузки.</span>
		</label>
	</div>

CSS:

#divFileInput {
	width: 100%;
	position: relative;
	margin: 15px 0;
	text-align: center;
}
 
#global_attachment_photo_file_input {
	opacity: 0;
	visibility: hidden;
	position: absolute;
}

.file_button {
	width: 100%;
	max-width: 98%;
	height: 60px;
	background: #1bbc9b;
	color: #FFFFFF;
	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;
	border-radius: 3px;
	cursor: pointer;
	margin: 0 auto;
}
 
.file_ico_upload {
	font-size: 35px;
	height: 60px;
	width: 60px;
	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 #FFFFFF;
}
 
#file_button_text {
	font: normal 14px Century Gothic, sans-serif;
	line-height: 1;
	margin-top: 1px;
}

Дальше я подумал, что после того, как пользователь выберет необходимый файл, он не увидит ни каких изменений в форме, и написал JS, который будет заменять текст "Выберите фотографию для загрузки." на название выбранного файла:

document.getElementById('global_attachment_photo_file_input').addEventListener('change', function () {
	if (this.value) {
		var fileName = this.value.replace(/(^.*[\\\/]+)/g, '');
		var cnt = fileName.length;
		if (cnt > 25) {
			var cutFileName = fileName.substr(0, 10);
				cutFileName += ' ... ';
				cutFileName += fileName.substr(cnt - 10);

			fileName = cutFileName;
		};

		document.getElementById('file_button_text').innerHTML = fileName;
	};
});

Если название файла будет состоять более, чем из 25 знаков, название будет изменено на вид (пример):

AQAGK2Y4Yr ... RHRfVI.jpg

А теперь покажу, что было (1 скрин) и что стало (2 скрин):
Стилизованная форма загрузки

Жалоба