<!DOCTYPE html>

<html>

<head>

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

    <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#myFile").change(function () {

                var filepath = $("input[name='myFile']").val();

                var extStart = filepath.lastIndexOf(".");

                var ext = filepath.substring(extStart, filepath.length).toUpperCase();

                if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {

                    alert("图片限于bmp,png,gif,jpeg,jpg格式");

                    $("#fileType").text("")

                    $("#fileSize").text("");

                    return false;

                } else { $("#fileType").text(ext) }

                var file_size = 0;

                if ($.browser.msie) {

                    var img = new Image();

                    img.src = filepath;

                    while (true) {

                        if (img.fileSize > 0) {

                            if (img.fileSize > 3 * 1024 * 1024) {

                                alert("图片不大于100MB。");

                            } else {

                                var num03 = img.fileSize / 1024;

                                num04 = num03.toFixed(2)

                                $("#fileSize").text(num04 + "KB");

                            }

                            break;

                        }

                    }

                } else {

                    file_size = this.files[0].size;

                    var size = file_size / 1024;

                    if (size > 10240) {

                        alert("上传的图片大小不能超过10M！");

                    } else {

                        var num01 = file_size / 1024;

                        num02 = num01.toFixed(2);

                        $("#fileSize").text(num02 + " KB");

                    }

                }

                return true;

            });

        });

    </script>

    <title>无标题文档</title>

</head>

<body>

    <table width="500" cellspacing="0" cellpadding="0">

        <tr>

            <td width="72" id="fileType">

            </td>

            <td width="242">

                <input type="file" name="myFile" id="myFile" />

            </td>

            <td width="184" id="fileSize" class="fileSize">

            </td>

        </tr>

    </table>

</body>

</html>

jquery实现上传文件大小类型的验证的更多相关文章

  1. js 限定上传文件大小 类型

    方案1 :限定大小 <html> <head> <script type="text/javascript">   var isIE = /ms ...

  2. Jquery 获取上传文件大小

    <input type="file" id="file1" /> <script> var size = $("#file1& ...

  3. MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小

    本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...

  4. MVC文件上传01-使用jquery异步上传并客户端验证类型和大小

    本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...

  5. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  6. jQuery文件上传插件Uploadify（转）

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  7. jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. 聊一聊jquery文件上传（支持多文件上传）

    谈到文件上传,现在一般都用现成的组件可以使用.PC端的可以使用uploadify.针对微网站H5也有uploadifive.但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的. ...

  9. Jquery plupload上传笔记（修改版）

    找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,来彰显自己曾经屌丝过,这插件还不错,支持多个上传和预览 首先引用,发现有的时候想学点新的东西,不过时间久了也 ...

随机推荐

  1. Android View事件分发-从源码分析

    View事件分发-从源码分析 学习自 <Android开发艺术探索> https://blog.csdn.net/qian520ao/article/details/78555397?lo ...

  2. js中函数的参数传递

    js中所有函数的参数传递都是按值传递,也就是说把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样,基本类型值的传递如同基本类型变量的复制一样,而引用类型的值的传递则如同引用类型 ...

  3. CSS 设计理念

    今天整理CSS2.1的规范,发现这个,分享给大家. CSS2.1 作为 CSS2 和 CSS1 的后序版本,基于一下一组设计理念: 向前和向后兼容.CSS2.1 的用户代理能够理解 CSS1 的样式表 ...

  4. 吴恩达-coursera-机器学习-week6

    十.应用机器学习的建议(Advice for Applying Machine Learning) 10.1 决定下一步做什么 10.2 评估一个假设 10.3 模型选择和交叉验证集 10.4 诊断偏 ...

  5. 【转载】vc编译exe的体积最小优化

    原文地址:http://www.2cto.com/kf/200908/40970.html vc通过设置参数来自定义编译方式.主要用到的技巧有: 一,使用release版而不用debug版编译 使用d ...

  6. 喵哈哈村的魔法考试 Round #2 (Div.2) 题解

    喵哈哈村的魔法考试 Round #2 (Div.2) 题解 A.喵哈哈村的战争 题解: 这道题就是for一遍,统计每个村子的战斗力的和,然后统计哪个村子的战斗力和大一点就好了. 唯一的坑点,就是这道题 ...

  7. 导入导出CSV

    const string dataPath = @"D:\Users\jin_h\Documents\Visual Studio 2013\Projects\ConsoleApplicati ...

  8. 使用 IntraWeb (19) - 基本控件之 TIWTreeView

    这是个饱受非议的控件; 我通过尝试, 理解了非议, 也能理解作者. 总之向作者的思路靠拢吧, 还是不错的. TIWTreeView 所在单元及继承链: IWCompTreeview.TIWTreeVi ...

  9. 使用CefSharp在.Net程序中嵌入Chrome浏览器（三）——基本操作

    CefSharp本身提供了WPF和WinForm两个版本的控件,这两个版本的控件使用方法大同小异,由于我WPF的版本用的较多,这里就简单的介绍下WPF版的CEFSharp控件的用法. 加载页面: Ch ...

  10. Canbus ID filter and mask

    Canbus ID filter and mask CANBUS is a two-wire, half-duplex, bus based LAN system that is ‘collision ...