<!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. nginx fastcgi 超时问题解决记录

    在网站后台导数据时,出现超时的情况.经过网上查找资料和试验 主要在下面几个配置的限制 1.php配置 第一种:set_time_limit(0); 永不过期 第二种: php.ini   max_ex ...

  2. UVA 10817 十一 Headmaster's Headache

    Headmaster's Headache Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Sub ...

  3. eclipse创建java类时自动添加注释

    一.按照以下顺序点击菜单 window-->preferences-->java-->Code Stype-->Code Templates-->Code-->Ne ...

  4. R语言保存文件 Error in save error writing to connection

    Error in save(filtered, file = paste(sampleName, "filtered", sep = "_")) :   err ...

  5. @SuppressWarnings—注解用法详解

    一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...

  6. servlet&jsp高级：第五部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. python_way day18 html-day4， Django路由，（正则匹配页码，包含自开发分页功能）， 模板， Model(jDango-ORM) : SQLite，数据库时间字段插入的方法

    python_way day18 html-day4 1.Django-路由系统   - 自开发分页功能 2.模板语言:之母板的使用 3.SQLite:model(jDango-ORM) 数据库时间字 ...

  8. hdu 5643 King's Game 约瑟夫变形

    首先约瑟夫问题的数学推理过程:我们知道第一个人(编号一定是(m-1) mod n) 出列之后,剩下的n-1个人组成了一个新的约瑟夫环(以编号为k=m mod n的人开始):k k+1 k+2 ... ...

  9. Python numpy学习笔记（一）

    下边代码是关于numpy的一些基本用法,包括数组和矩阵操作等... import numpy as np print "<== print version ==>" p ...

  10. DB层面上的设计 分库分表 读写分离 集群化 负载均衡

    第1章  引言 随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的 互联网应用,每天几十亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的 ...