实现好看的文件选择按钮

引言

网页设计中默认的文件路径输入框，即file控件，由于其外观太朴素，也无法很难改变其属性特征，想隐藏路径名称也不行。但是我们可以通过巧妙的方法改成自己想要的样子。

---

思路

• 如果没有直接改变的好方法，我们可以尝试扬长避短的来绕过其外观短处，只使用我们需要的功能
  部分。
• 这里我将用自定义的按键来替换其外观，而file控件，我将其隐藏掉。它虽然被隐藏了，但是其功能仍在。
• 开始动手。

---

工程

1、建HTML

HTML文件选择部分实例建下面代码。

• button(btn)为我的按键控件，给大家显示和点击使用的。
• file(file)是我们要利用的文件路径导入控件，他有个onchange事件触发，可以在JS中定义描述。

<div id="inputLine">
	<form action="" method="post" name="form1">

		<input type="button" class="btn" id="choosefile" value="选择文件" />
		<input type="file" class="file" id="LoadFile" onchange="doLoadFile()" multiple="multiple" />

	form>
div>

---

2、CSS描述

• 首先，描述按键外观，这里我简单加几条描述，如有需要自行修改。
• 其次，最为关键的是将file控件隐藏，这个是最关键的，通过ID或者class，都行。下面是通过ID定义为不显示，这样可以预览到你的界面就只有一个按键了。

.btn {
	/* 倒圆角 */
	border-radius: 6px;
	/* 外边缘 */
	margin: 0.5rem 0;	 
	/* 背景颜色 */
	background-color: #008CBA;
	/* 字体颜色 */
	color: #eaeaea; 
	/* 鼠标经过变小手 */
	cursor: pointer;	 
}

/* 隐藏 */
#LoadFile {
	display: none;
}

---

3、JS动作

那么，我们只留下了最后一个关键的问题，就是如何将两个控件联系起来。这时候，JS就要闪耀出场了，它是当之无愧的动作大师。

• 1、choosefile的点击事件可以进入choosefile.onclick = function() 功能函数。
• 2、在choosefile.onclick = function() 功能函数中，我们有定义获取file控件对象并执行器单击事件，只要执行到这时，我们的file控件将弹出文件路径选择框。
• 3、只要我们选择了文件，那么文件路径选择file控件将触发其onchange事件，进入到function loadfile()事件功能函数中去，其它具体内容就是具体项目定义了。
• 4、需要重点注意的是 LF.value 设置为空，这个操作非常重要，相当于初始化它。不然重复加载同一个路径将不会触发onchange事件。

// 按键单击加载文件
choosefile.onclick = function() {

    //通过id获取file控件对象
	var LF = document.getElementById('LoadFile');
	//清除路径
	LF.value = "";
	//执行file控件单击事件
	LF.click();
}

//onchange加载文件
function loadfile() {	 
	doLoadFile();
     ...
}