<!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. A840S黑砖修复过程(2013-05-22修改)

    首先感谢su_ky大神,没有他的博客和帖子,这次救砖根本没有成功的可能.其次谢谢A840S交流群284998898的Sunny deng,没有他提供的分区镜像同样也完成不了这次的工作.现象:手机完全没 ...

  2. web应用中web.xml配置详解

    Web.xml常用元素 <web-app> <display-name></display-name>定义了WEB应用的名字 <description> ...

  3. Dev GridControl导出

    问题一. DevExpress GridView导出到Excel中不能导出自定义日期 问题描述: 我有一个第一列为日期列的GridView.它在运行时会绑定到日期,但他们通过CustomColumnD ...

  4. 搭建本地的git仓库

    折腾了快一天了,终于搭建成功了. 分享一下搭建的步骤: 一.GIT仓库的创建 1. adduser git 2. passwd git 此例设置git的密码为123456 3. cd /home/gi ...

  5. [51NOD1405] 树的距离之和（树DP）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1405 (1)我们给树规定一个根.假设所有节点编号是0-(n-1 ...

  6. c# 基础之数组（包含三维数组）

    public enum ChessType { White = , None=, Black=, } class Program { static void Main(string[] args) { ...

  7. ubuntu下解压zip文件乱码

    安装unar 即可解决问题 sudo apt get install unar

  8. CentOS 6.5 64位 安装zabbix-2.2.0

    安装环境: VM 10 + CentOS-6.5-x86_64-minimal 虚拟机网络是NAT方式, 动态IP Xshell登录到Centos操作 刚装的centos,啥都没有,先配一下yum 首 ...

  9. VS连接Windows Mobile模拟器

    原文:http://www.cnblogs.com/xjimmyshcn/archive/2011/07/19/2111087.html 一.WinCE 模拟器通过ActiveSync 6.1(即Wi ...

  10. 汇编语言指令与debug命令符

    •MOV与ADD指令 汇编指令 控制CPU完成的操作 形式化语法描述 mov ax, 18 将18送入AX (AX)=18 mov   ah, 78 将78送入AH (AH)=78 add ax, 8 ...