Tweet

Pocket

<input type=”file”>のボタンを画像に変えて、選択したファイルパスをテキストエリアに表示する方法。

html

<label for="fileUp1" class="fileUp">
	選択されていません。
	<input type="file" name="fileUp1" id="fileUp1" onchange="uv.style.display='inline-block'; uv.value = this.value;">
	<input type="text" id="uv" class="uploadValue" disabled />
</label>
<input type="button" value="ファイルを削除" class="fileDel">
	
</div><!--/#wrapper-->
<script>
	$(document).ready(function(){
		$(".fileDel").on('click', function() {
			$(".fileUp input").val('');
			$("#uv").hide();
		});
	});
</script>

scss

label.fileUp {
	position: relative;
	height: 30px;
	line-height: 25px;
	display: block;
	padding-left: 120px;
	font-size: 16px;

	&:before {
		position: absolute;
		top: -3px;
		left: 0;
		width: 110px;
		height: 30px;
		content: "";
		background: url(img/button.png) no-repeat 0 0;
		background-size: cover;
		z-index: 2;
	}

	input[type="file"] {
		position: absolute;
		left: -9999px;
	}

	.uploadValue {
		display: none;
		background: #fff;
		position: absolute;
		top: -3px;
		left: 120px;
		width: auto;
		z-index: 2;
		width: auto;
		height: 30px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		padding: 5px;
	}
}

「ファイルを削除」ボタンクリックで、選択したファイルをキャンセルできます。