input file文件上传CSS模拟为选择加上传两个按钮

最新推荐文章于 2023-04-19 16:24:12 发布

东成熙就

最新推荐文章于 2023-04-19 16:24:12 发布

阅读量1.8k

点赞数

分类专栏： Javascript 文章标签： input file CSS样式判断导入Excel格式的JS方法

本文链接：https://blog.csdn.net/phpfer/article/details/48660719

版权

Javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

原理就是把input type=file隐藏到下一层，用一个input type=txt覆盖到上一层。

CSS部分：

<style type="text/css">
.file-box{
position:relative;
width:100%;
}
.ftxt{
  width: 48%;
  display: inline-block;
  height: 32px;
  cursor: pointer;
  line-height: 32px;
  color: #e4e7e9;
  text-indent: 10px;
  border: 1px solid #e4e7e9;
  border-radius: 4px;
}
.ftxt:hover{
	border: 1px solid #1ab394;
 	color: #1ab394;
}
.ffile{
position:absolute; 
top:0;
left:0; 
height:32px; 
filter:alpha(opacity:0);
opacity: 0;
width: 48%;
}
</style>

HTML+JS部分：

<form action="" method="post" class="file-box">
	<input type='text' name='textfield' id='textfield' class='ftxt' value="请选择需要上传的" />  
	<input type='button' class='btn btn-block btn-primary' value='选择文件' οnclick="document.getElementById('fileField').click()" />
	<input type="file" name="fileField" class="ffile" id="fileField" size="28" οnchange="document.getElementById('textfield').value=this.value" οnmοuseοver="document.getElementById('textfield').style.color='#1ab394';document.getElementById('textfield').style.borderColor='#1ab394'" οnmοuseοut="document.getElementById('textfield').style.color='#e4e7e9';document.getElementById('textfield').style.borderColor='#e4e7e9'" />
	<input type="submit" name="submit" class="btn btn-block btn-success" value=" 导 入 " style="margin-left: 60%;" />
</form>

另外记录一个判断导入EXCEL文件的方法：

//判断导入Excel文件
function importExc(){
	var filePath = document.getElementById("excelPath").value;
	var fileType = "";
			
	if(filePath == ""){
		alert("请选择所要导入的文件！");
		return false;
	}else if(filePath.indexOf(".") < 0){
		alert("所要导入的文件格式不正确，请重新选择！");
		return false;
	}else{
		fileType = filePath.substring(filePath.lastIndexOf("."));
		if(".xls" != fileType && ".xlsx" != fileType){
			alert("所要导入的文件格式不正确，请重新选择！");
			return false;
		}else{
					
			//交给后台程序处理并提醒导入成功与否...	
					
	<span style="white-space:pre">	</span>}		
	}
}