<input type="file"/>控件是否为空验证，文件类型验证，file控件清空,禁止手写。

最新推荐文章于 2021-04-14 16:23:30 发布

原创最新推荐文章于 2021-04-14 16:23:30 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个HTML文件上传表单的设计与实现，包括如何禁止手动输入、验证文件是否为空、检查文件类型是否符合要求（仅限.xls文件），以及如何在上传不符合条件的文件时清空file控件。

file控件禁止手写，是否为空验证，文件类型验证，file控件清空。

<html>
<body bgcolor="white">
	<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
		<TBODY>
			<TR>
				<TD>
					<center>
						<h4>
							考勤记录导入
						</h4>
					</center>
					<hr/>
					<br/>
					<center>
					<form action="<%=request.getContextPath() %>/admin/HtmlFile.do" method="post" enctype="multipart/form-data" name="HtmlFileForm" onsubmit="return check()">
						<span id='uploadSpan'>
						<input type="file" name="file" id="file" unselectable="on" onchange='checkFileType(this.value);'/>&nbsp;
						</span>
					<input type="submit" value="提交"/>
					</form>
					</center>
				</TD>
			</TR>
		</TBODY>
	</TABLE>
<script type="text/javascript">
function checkFileType(str){
	var pos = str.lastIndexOf(".");
	var lastname = str.substring(pos,str.length);
	var resultName=lastname.toLowerCase();
	if ('.xls'!=resultName.toString()){alert('只能上传xls文件，您上传的文件类型为'+lastname+'，请重新上传');
	resetFile();
	}
}
var html=document.getElementById('uploadSpan').innerHTML; 

function resetFile(){ 
document.getElementById('uploadSpan').innerHTML=html; 
} 

function   check() 
{ 
   if(HtmlFileForm.file.value == "") {
           alert("请选择文件路径");
           return false;
   }else{
   		return true;
   }
}
	
</script>
</body>

</html>