<!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>