<!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. 【leetcode❤python】 205. Isomorphic Strings

    #-*- coding: UTF-8 -*- #转换法class Solution(object):    def isIsomorphic(self, s, t):        "&qu ...

  2. [转]Unity 脚本生命周期流程图

    渲染 OnPreCull: 在相机剔除场景之前调用此函数.相机可见的对象取决于剔除.OnPreCull 函数调用发生在剔除之前. OnBecameVisible/OnBecameInvisible:  ...

  3. 如何优雅的处理Nodejs中的异步回调

    前言 Nodejs最大的亮点就在于事件驱动, 非阻塞I/O 模型,这使得Nodejs具有很强的并发处理能力,非常适合编写网络应用.在Nodejs中大部分的I/O操作几乎都是异步的,也就是我们处理I/O ...

  4. Mysql事件学习

    出自:http://blog.chinaunix.net/uid-20639775-id-3323098.html Mysql事件学习 在系统管理或者数据库管理中,经常要周期性的执行某一个命令或者SQ ...

  5. 经典JSP数据库连接(ORACLE、SQL Server、MySQL)

    1.连接ORACLE8/8I/9I数据库(thin模式) <%@ page language="java" import="java.util.*" pa ...

  6. ubuntu14.04换一个更快的源

    mirrors.yun-idc.com,这个源可比ubuntu自带的源快多了,我的source.list文件内容如下: deb http://mirrors.yun-idc.com/ubuntu/ t ...

  7. POJ 1142 Smith Numbers（史密斯数）

    Description 题目描述 While skimming his phone directory in 1982, Albert Wilansky, a mathematician of Leh ...

  8. 加速chrome之Vimium快捷键

    使用Vimium一段时间,不能完全学习所有的快捷键.但是对这种简约,vim风格的设计还是非常敬佩. 下面是一些总结: Vimium快捷键 WIKI: 是一个开源的google chrome的扩展插件, ...

  9. DataGridView常用操作

    一.DataGridView列右击菜单事件处理 (1). 添加一个快捷菜单contextMenuStrip1:(2). 给dataGridView1的CellMouseDown事件添加处理程序: pr ...

  10. bzoj 1588: [HNOI2002]营业额统计 treap

    1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 13902  Solved: 5225[Submit][Sta ...