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

[JS] 限制上传文件的类型和大小的更多相关文章

  1. js判断上传文件的类型和大小

    //检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value ...

  2. js限制上传文件的类型和大小

    var maxsize = 6*1024*1024;//6M var errMsg = "上传的附件文件不能超过6M!!!"; var tipMsg = "您的浏览器暂不 ...

  3. js限制上传文件类型和大小

    <html> <head> <script type="text/javascript"> function fileChange(target ...

  4. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  5. js能否上传文件夹

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  6. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  7. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  8. js获取上传文件内容

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  9. MIME类型－服务端验证上传文件的类型

    MIME的作用 : 使客户端软件,区分不同种类的数据,例如web浏览器就是通过MIME类型来判断文件是GIF图片,还是可打印的PostScript文件. web服务器使用MIME来说明发送数据的种类, ...

随机推荐

  1. JAVA数字想加并输出

    Java课后作业博文 1.设计思想:JAVA里面的Scnner类可以将用户输入的各种字符转化为其他类型.例如 Scanner sc = new Scanner(System.in); int a =  ...

  2. js获取鼠标位置

    1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...

  3. C++实现二叉树，运用模板，界面友好，操作方便 运行流畅

    //.h文件 #ifndef TREE_H #define TREE_H #include<iostream> #include<iomanip> using namespac ...

  4. tophat cufflinks cuffcompare cuffmerge 的使用

    Cole Trapnell said: there are three strategies: 1) merge bams and assemble in a single run of Cuffli ...

  5. liftover的使用/用法

    Lift genome positions Genome positions are best represented in BED format. UCSC provides tools to co ...

  6. 【转】Kali Linux 新手折腾笔记

    原作者:http://defcon.cn/1618.html 最近在折腾Kali Linux 顺便做一简单整理,至于安装就不再多扯了,估计会出现的问题上一篇文章<VMware虚拟机安装Kali ...

  7. Python入门-多行语句

    1. Python语句中一般以新行作为为语句的结束符. 但是我们可以使用斜杠( \)将一行的语句分为多行显示. 2. 语句中包含[], {} 或 () 括号就不需要使用多行连接符. days = [' ...

  8. 访问Google搜索,Google学术镜像搜索

    Google学术镜像搜索:http://dir.scmor.com/google/ 不用FQ也能访问谷歌搜索网站,让我们一起Google 不用FQ也能访问谷歌搜索网站,让我们一起Google(摘自:h ...

  9. SQL 语句转换格式函数Cast、Convert

    CAST和CONVERT都经常被使用.特别提取出来作为一篇文章,方便查找. CAST.CONVERT都可以执行数据类型转换.在大部分情况下,两者执行同样的功能,不同的是CONVERT还提供一些特别的日 ...

  10. jquery animate 改变元素背景颜色

    通过animate不能直接设置css样式可以通过https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.j ...