HTML制作漂亮的文件上传控件

---

HTML制作漂亮的文件上传控件

---

相关脚本文件引用：

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.min.js"></script>

没有bootstrap的朋友可以去官网下载，bootstrap下载地址：https://v3.bootcss.com/

HTML代码：

<li class="form-group">
	<label>头像</label>
	<div class="input-group">
		<input type="text"  class="form-control" id="path" onclick="$('#file').click()" readonly/>
		<span id="upload" class="btn btn-info input-group-addon" onclick="$('#file').click()">
			<i class="glyphicon glyphicon-cloud-upload"></i>
			上传
		</span>
	</div>
	<input type="file" class="form-control" id="file" style="display:none"/>
</li>

JS代码：

$("#file").change(function () {
	$("#path").val($("#file")[0].files[0].name);
});

接下来我们看效果图：
上传前：

上传后：