<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;

function fileChange(target, id) {

    var fileSize = 0;

    var filetypes = [".jpg", ".png", ".rar", ".txt", ".zip", ".doc", ".ppt", ".xls", ".pdf", ".docx", ".xlsx"];

    var filepath = target.value;

    var filemaxsize = 1024 * 2; //2M

    if (filepath) {

        var isnext = false;

        var fileend = filepath.substring(filepath.indexOf("."));

        if (filetypes && filetypes.length > 0) {

            for (var i = 0; i < filetypes.length; i++) {

                if (filetypes[i] == fileend) {

                    isnext = true;

                    break;

                }

            }

        }

        if (!isnext) {

            alert("不接受此文件类型！");

            target.value = "";

            return false;

        }

    } else {

        return false;

    }

    if (isIE && !target.files) {

        var filePath = target.value;

        var fileSystem = new ActiveXObject("Scripting.FileSystemObject");

        if (!fileSystem.FileExists(filePath)) {

            alert("附件不存在，请重新输入！");

            return false;

        }

        var file = fileSystem.GetFile(filePath);

        fileSize = file.Size;

    } else {

        fileSize = target.files[0].size;

    }

    var size = fileSize / 1024;

    if (size > filemaxsize) {

        alert("附件大小不能大于" + filemaxsize / 1024 + "M！");

        target.value = "";

        return false;

    }

    if (size <= 0) {

        alert("附件大小不能为0M！");

        target.value = "";

        return false;

    }

}

</script>

</head>

<body>

<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>

</body>

</html>

客户端js判断文件类型和文件大小即限制上传大小的更多相关文章

  1. [转]客户端js判断文件类型和文件大小即限制上传大小

    原文地址:https://www.jb51.net/article/43498.htm 需要脚本在客户端判断大小和文件类型,由于网上没有适合的,就自己写了一个并测试 文件上传大小限制的一个例子,在此与 ...

  2. js判断文件类型大小并给出提示

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...

  3. JS判断浏览器类型，JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

  4. JavaScript根据文件名判断文件类型

    //JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",& ...

  5. Linux中用st_mode判断文件类型

    Linux中用st_mode判断文件类型 2012-12-11 12:41 14214人阅读 评论(4) 收藏 举报  分类: Linux(8)  C/C++(20)  版权声明:本文为博主原创文章, ...

  6. PHP取二进制文件头快速判断文件类型

    <?php /*文件扩展名说明 *7173 gif *255216 jpg *13780 png *6677 bmp *239187 txt,aspx,asp,sql *208207 xls.d ...

  7. 通过JS判断联网类型和连接状态

    通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现 ...

  8. java文件上传，自动判断文件类型

    public enum FileType { /** * JEPG. */ JPEG("FFD8FF"), /** * PNG. */ PNG("89504E47&quo ...

  9. Python之基于十六进制判断文件类型

    核心代码: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Author : suk import struct from io import Byt ...

随机推荐

  1. json的js和C#操作

    C#端的WebService接口接收json格式数据,处理后以json格式返回result using System; using System.Collections.Generic; using ...

  2. asp.net缓存（一）

    ASP.NET页面输出缓存(OutputCache) 页面输出缓存是最为简单的缓存机制,该机制将整个ASP.NET页面内容保存在服务器内存中.当用户请求该页面时,系统从内存中输出相关数据,直到缓存数据 ...

  3. 一次$.getJSON不执行的记录

    别人的代码,拿过来调,发现修改功能都不能用,修改时通过ajax发json获取数据的,看chrome开发者工具发现有发送数据,也有返回值: 发起请求并获取数据,发现回调函数不执行! $.getJSON( ...

  4. The Letter Carrier's Rounds（摘）

    Description For an electronic mail application you are to describe the SMTP-based communication that ...

  5. CppCon - Modern Template Metaprogramming 杂记

    2014年底才看到github和channel9上有CppCon2014的视频和资料,顿时激动不已.最近小生也一直在研习CppCon2014中令人兴奋的内容.这篇鄙文就是小生学习了<Modern ...

  6. （原）Opencv中直方图均衡和图像动态范围拉伸的代码

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5102032.html 参考网址: http://blog.csdn.net/abcjennifer/a ...

  7. JavaScript权威指南阅读笔记3

    第六章 对象 1.首先是先介绍了对象直接量的格式:对象直接量就是1.由若干个名/值对组成的映射表,2名/值对中间由冒号分割,3名值对之间由逗号分割,4整个映射表由花括号括起来.这样就组成了一个对象直接 ...

  8. MySQL学习笔记(4) - 创建数据库

    1.建立一个简单的数据库 CREATE DATABASE t1: 图中如果未打:号,系统会等待直到用户输入结束符才会之行语句. 2.查看当前服务器下数据库列表 SHOW DATABASES; 必须是D ...

  9. Python爬虫学习：四、headers和data的获取

    之前在学习爬虫时,偶尔会遇到一些问题是有些网站需要登录后才能爬取内容,有的网站会识别是否是由浏览器发出的请求. 一.headers的获取 就以博客园的首页为例:http://www.cnblogs.c ...

  10. STL之二分查找 (Binary search in STL)

    STL之二分查找 (Binary search in STL) Section I正确区分不同的查找算法count,find,binary_search,lower_bound,upper_bound ...