实现好看的文件选择按钮

实现好看的文件选择按钮

    • 引言
    • 思路
    • 工程
      • 1、建HTML
      • 2、CSS描述
      • 3、JS动作

引言

网页设计中默认的文件路径输入框,即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();
     ...
}

你可能感兴趣的:(H5+CSS+JS,css,javascript,html5,好看外观,文件路径选择)