您的位置：首页 > Web前端 > JavaScript

JS 限制上传文件的类型和大小

2015-11-25 18:33 696 查看 
<!DOCTYPE html>
<!-- saved from url=(0035)http://localhost:9090/qraved/update -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>

<body style="background:#ecf0f5;">

<div class="container">
<div class="header clearfix" style="border-bottom:1px solid #ccc;">
<h3 style="float:left;" class="text-muted">EXCUTE SQL TASK</h3>
</div>

<div style="margin-top:30px;">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">upload sql file</h3>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<input type="file" id="uploadFile" onchange="check()">
<p class="help-block" id="hintInfo">select a sql file</p>
<input type="button" id="uploadBtn" onclick="upload()" class="btn btn-sm btn-info" value="upload" />
<input type="button" id="checkBtn" onclick="checksql()" class="btn btn-sm btn-danger" value="check" style="display:none;"/>
</div>
</form>
</div>
</div>
</div>
</div>

<script language="javascript" src="jQuery-2.1.4.min.js"></script>
<script language="javascript">

//是否允许上传操作
var fileSelected = false;

//是否上传成功
var uploadSuccess = false;

//是否检测成功
var checkSuccess = false;

//文件大小限制
//var maxsize = 2*1024;//2M
var maxsize = 2;//2KB

//检测文件类型
function check(){

$("#uploadBtn").show();
$("#checkBtn").hide();

var file = $("#uploadFile").val();
console.log("文件路径："+file);
if(file == '' || file == null) {
$("#hintInfo").html("<span style='color:red;'>请选择所要上传的文件！</span>");
return false;
}

var index = file.lastIndexOf(".");
var ext = file.substring(index + 1, file.length);
console.log("文件类型："+ext);

if(ext != "sql" && ext!="SQL" ) {
$("#hintInfo").html("<span style='color:red;'>选择的文件格式不正确，请选择sql文件(*.sql)！</span>");
return false;
}

//检测文件大小

var obj =  document.getElementById("uploadFile");
var fileSize = 0;
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
if (isIE && !obj.files) {
var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
}else {
fileSize = obj.files[0].size;
}
console.log(fileSize +"byte");
fileSize=Math.round(fileSize/1024*100)/100; //单位为KB
console.log(fileSize+"KB");

if(fileSize>=maxsize){
$("#hintInfo").html("<span style='color:red;'>文件最大尺寸为"+maxsize+"KB，请重新上传！</span>");
return false;
}

//获取文件名
var index2 = file.lastIndexOf("\\");
if(index < 0) {
index2 = file.lastIndexOf("/");
}
var filename = file.substring(index2 + 1, file.length);
console.log(filename);

$("#hintInfo").html("<span style='color:green;'>已选择文件<span style='color:orange;'>"+filename+"</span>，请点击upload按钮上传！</span>");
fileSelected = true;
}

//执行上传操作
function upload(){
if(!fileSelected){
alert("请选择sql文件(*.sql)！");
return false;
}

//TO DO 执行上传操作
uploadSuccess = true;
if(uploadSuccess){
//上传成功后显示check按钮，隐藏upload按妞
$("#hintInfo").html("<span style='color:green;'>上传成功！</span>");
$("#uploadBtn").hide();
$("#checkBtn").show();
}else{
//上传失败则显示提示信息
$("#hintInfo").html("<span style='color:red;'>上传失败！</span>");
$("#uploadBtn").show();
$("#checkBtn").hide();
}
}

function checksql(){

checkSuccess = true;
//根据槛车状态提示检测信息
if(checkSuccess){
$("#hintInfo").html("<span style='color:green;'>检测成功！</span>");

}else{
$("#hintInfo").html("<span style='color:green;'>检测失败！</span>");
}
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航