Замена input file

by avgustre

HTML

<div class="upload_form">

	<label>

		<input name="file" type="file" class="main_input_file" />
		<div>Обзор...</div>
		<input class="f_name" type="text" id="f_name" value="Файл не выбран." disabled />

	</label>

</div>

CSS

.main_input_file {
	display: none;
}

.upload_form div {
	width: 100px;
	height: 32px;
	background: #3498db;
	border-radius: 4px;
	color: #fff;
	text-align: center;
	line-height: 32px;
	font-family: arial;
	font-size:14px;
	display: inline-block;
	vertical-align: top;
}

.upload_form div:hover {
	background: #2980b9;
	cursor: pointer;
}

#f_name {
	background: transparent;
	border: 0;
	display: inline-block;
	vertical-align: top;
	height: 30px;
	padding: 0 8px;
	width: 150px;
}

JavaScript

$(".main_input_file").change(function() {

			var f_name = [];

			for (var i = 0; i < $(this).get(0).files.length; ++i) {

				f_name.push(" " + $(this).get(0).files[i].name);

			}

			$("#f_name").val(f_name.join(", "));
});