Input[type=”file”] 显示效果美化方法

Html中input可以作为上传图片代码如下
<input type="file" name="" id="">
但是演示非常不好看，下面做一番美化处理，效果如下：

美化方法

1. 隐藏 input 标签
2. 使用 label 标签在input标签位置显示；
3. 用js获取 input 中上传的文件名称，并在 lable 标签中显示

input[type=”file”] 美化之 Html

/**
* input 文件上传 Html
*
* @author 智慧宫
* @link https://lerm.net
*/
<div class="container-fluid p-0">
	<div class="img-upload">
 		<input type="file" class="img-upload-input" id="img-upload-input">
		<label class="img-upload-label text-center p-4 position-absolute" id="img-upload-label" for="img-upload-input">
			<i class="fas fa-cloud-upload-alt fa-2x"></i>
		</label>
	</div>
</div>

input[type=”file”] 美化之 CSS

使用opacity: 0; 隐藏input标签，美化lable标签；

/**
* input 文件上传 CSS
*
* @author 智慧宫
* @link https://lerm.net
*/
.img-upload {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 0;
	height: calc(3.5rem + 28px);
}

.img-upload-input {
	position: relative;
	z-index: 2;
	width: 100%;
	height: calc(3rem + 28px);
	margin: 0;
	opacity: 0;
}

.img-upload-label {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #f0f0f0;
	text-align: center;
	padding: 1.5rem;
}

input[type=”file”] 美化之 JS

使用JS 来获取上传文件的名称，并在 label 标签中显示上传的文件名

/**
 * input 文件上传 JS
 *
 * @author 智慧宫
 * @link https://lerm.net
 */
$(".img-upload").on("change", "#img-upload-input", function () {
	var filePath = $(this).val();
	if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {
		var arr = filePath.split('\\');
		var fileName = arr[arr.length - 1];
		$("#img-upload-label").html(fileName);
	}
})

美化效果展示