How to filter uploaded file formats using javascript/jquery

Home

Web Front-end

JS Tutorial

How to filter uploaded file formats using javascript/jquery_jquery

May 16, 2016 pm 06:49 PM

javascript jquery upload files

Copy code The code is as follows:

 
<!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"&gt ; .errorInfo{ 
color:red; 
padding-left:5px; 
}</style> 
<script type="text/javascript"><!-- 
$(function(){ 
$("#DataReport").click(function(){ 
//The uploaded file cannot be empty, and the format must be xsl and xlsx 
var flag=true; 
var fileObject=$("input[name='file']"); 
var filepath=$("input[name='file']").val(); 
if(filepath ==undefined||$.trim(filepath)==""){ 
fileObject.focus().next().text("Please choose to upload a file!"); 
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().next().text("The uploaded file must be Excel File! "); 
flag=false; 
}else{ 
fileObject.next().text(""); 
} 
} 

//Proceed Other related checks 

if(flag){ 
alert("File uploaded successfully"); 
} 
}); 
}); 

/ / --></script> 

</head> 
<body> 
<form action="#" method="POST" enctype="multipart/form -data"> 
<div><input type="file" name="file"><span class='errorInfo'></span></div> 
 <div><input type="button" value="Upload" id="DataReport"></div> 
</form> 
</body> 
< /html> 

Note: If you add the jquery import statement in the head, the blog will still filter out the imported js files.
How to filter uploaded file formats in JavaScript:

Copy code The code is as follows:

<!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&gt ; 
<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="Please select a file to upload!"; 
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="The uploaded file must be an Excel file! "; 
flag=false; 
}else{ 
errorObject.innerText=""; 
} 
} 
//Perform other related verifications
if(flag) { 
alert("File uploaded successfully"); 
} 
} 
// --></script> 
</head> 
<body> 
<form action="#" method="POST" enctype="multipart/form-data"> 
<div><input type="file" id="file">&lt ;span id="error" class='errorInfo'></span></div> 
<div><input type="button" value="Upload" id="DataReport" onclick ="validateFile()"></div> 
</form> 
</body> 
</html>

Statement of this Website

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