search

Home >Web Front-end >JS Tutorial >Detailed explanation of JS/jquery upload file format filtering steps

Detailed explanation of JS/jquery upload file format filtering steps

php中世界最好的语言
php中世界最好的语言Original
2018-04-23 14:00:422158browse

这次给大家带来JS/jquery上传文件格式过滤步骤详解，JS/jquery上传文件格式过滤的注意事项有哪些，下面就是实战案例，一起来看一下。

注：在head中加入jquery的引入语句，博客还是会过滤掉引入的js文件。
javascript中对上传文件格式过滤的方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> <html> 
<head> 
<style><!-- 
.errorInfo{ 
color:red; 
padding-left:5px; 
} 
--></style><style bogus="1"> .errorInfo{ 
color:red; 
padding-left:5px; 
}</style> 
<script type="text/javascript"><!-- 
function validateFile(){ 
var flag=true; 
var fileObject=document.getElementById("file"); 
var errorObject=document.getElementById("error"); 
var filepath=fileObject.value; 
if(filepath==undefined||filepath==""){ 
fileObject.focus(); 
errorObject.innerText="请选择上传文件！"; 
flag=false; 
}else{ 
var fileArr=filepath.split("\\"); 
var fileTArr=fileArr[fileArr.length-1].toLowerCase().split("."); 
var filetype=fileTArr[fileTArr.length-1]; 
if(filetype!="xls"&&filetype!="xlsx"){ 
fileObject.focus(); 
errorObject.innerText="上传文件必须为Excel文件！"; 
flag=false; 
}else{ 
errorObject.innerText=""; 
} 
} 
//进行其他相关校验 
if(flag){ 
alert("文件上传成功"); 
} 
} 
// --></script> 
</head> 
<body> 
<form action="#" method="POST" enctype="multipart/form-data"> 
<p><input type="file" id="file"><span id="error" class=&#39;errorInfo&#39;></span></p> 
<p><input type="button" value="上传" id="DataReport" onclick="validateFile()"></p> 
</form> 
</body> 
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery插件Tocify动态节点实现目录菜单

jQuery解析XML文件与动态增加js文件如何实现

The above is the detailed content of Detailed explanation of JS/jquery upload file format filtering steps. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the steps of jquery parsing XML string + XML file (with code)Next article：Detailed explanation of the steps of jquery parsing XML string + XML file (with code)

Related articles

See more