<!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. php获取汉字的拼音 拼音首字母

    /***获取汉字的拼音*/function pinyin($s, $isfirst = false) { static $pinyins; $s = trim($s); $len = strlen($ ...

  2. SD卡驱动分析(一)

    Android下的SD卡驱动与标准LINUX下的SD卡驱动好像没有太大的区别,这里就以高通的ANDROID 2.3以代表,来简要分析一下LINUX下SD卡驱动的写法.由于小弟的技术有限,分析的有错的地 ...

  3. 分别向Set集合以及List集合中添加"A"、"a"、"c"、"C"、"a"，观察重复值"a"能否添加成功

    package lianxi; import java.util.*; public class JhSet { public static void main(String[] args) { Se ...

  4. STREAM Benchmark

    STREAM Benchmark及其操作性能分析 文/raywill STREAM 是业界广为流行的综合性内存带宽实际性能 测量 工具之一.随着处理器处理核心数量的增多,内存带宽对于提升整个系统性能越 ...

  5. linux bash shell 流程控制（if/else ）

    本文转自:http://blog.csdn.net/flowingflying/article/details/5069646 本文也即<Learning the bash Shell>3 ...

  6. Javascript this指针

    Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.   前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对 ...

  7. vim使用札记

    最近开始用vim编辑器了,从最开始的配置到现在慢慢使用,我在这儿会贴出一些我的使用上遇到过的问题和如何解决的方案,留给自己和一些会用到的人看看 1.vim怎么使汇编语法高亮 开始不知道,然后把文件的后 ...

  8. 9.Parameters

    1.Optional and Named Parameters calls these methods can optionally not specify some of the arguments ...

  9. [转] Android获取Manifest中<meta-data>元素的值

    转自: http://www.2cto.com/kf/201303/194824.html android 开发中:   在AndroidManifest.xml中,<meta-data> ...

  10. alloc && afree

    #define ALLOCSIZE 10000 static char allocbuf[ALLOCSIZE]; static char *allocp = allocbuf; char *alloc ...