Copy codeThe 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>
<Script type = "text/javascript"> <! --
$ (Function (){
$ ("# DataReport"). click (function (){
// The file to be uploaded cannot be blank. 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 ("Select Upload 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 an Excel file! ");
Flag = false;
} Else {
FileObject. next (). text ("");
}
}
// Perform other related verification
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 to the head, the blog will filter out the imported js files.
How to filter the format of uploaded files in javascript:
Copy codeThe 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>
<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 = "Select Upload 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 ();
ErrorObject. innerText = "the uploaded file must be an Excel file! ";
Flag = false;
} Else {
ErrorObject. innerText = "";
}
}
// Perform other related verification
If (flag ){
Alert ("File Uploaded successfully ");
}
}
// --> </Script>
</Head>
<Body>
<Form action = "#" method = "POST" enctype = "multipart/form-data">
<Div> <input type = "file" id = "file"> <span id = "error" class = 'errorinfo'> </span> </div>
<Div> <input type = "button" value = "Upload" id = "DataReport" onclick = "validateFile ()"> </div>
</Form>
</Body>
</Html>