Webサービスのプロフィール編集画面などで、プロフィール画像をアップロードするとプレビュー表示される機能ってあると思いますが、それの実装方法のメモ。

HTML

<div id="icon_box">
	<div id="upload_img">
		<div class="img"></div>
	</div>
	<div id="upload_btn">
		<label>
			<input type="file" accept=".png, .jpg, .jpeg, .gif" onchange="uploadImage(this);"/>
		</label>
	</div>
</div>

今回はアップロードされた画像が #upload_img > .img の背景画像として表示されるようにします。

CSS

#icon_box {
	background: #eee;
	padding: 32px 24px 24px;
	border-radius: 8px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#upload_img {
	width: 120px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #fff;
	margin-bottom: 16px;
}

#upload_img > .img {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url(../images/avatar.png) no-repeat center center / cover;
}

#upload_img > .imgには画像が未アップロード状態のときに表示される画像を設定しておくとよいと思います。

JavaScript

function uploadImage(target) {
	let reader = new FileReader();
	reader.onload = function () {
		$upload_img = $("#upload_img > .img");
		img = new Image();
		img.src = this.result;
		$upload_img.css("background-image", "url(" + this.result + ")");
	}
	reader.readAsDataURL(target.files[0]);
}

1行目で、input[type=”file”]のonchange属性（uploadImage）を関数に設定します。

4行目にはアップロードした画像を背景として表示する要素を指定してください。