`

jquery验证上传文件样式及大小(好用)

阅读更多
<!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.filer:简单的 HTML5 文件上传器,一个 jQuery 插件工具,它完全改变了文件输入并使其具有多个文件选择、拖放支持、不同的验证、缩略图、图标、即时上传、打印屏幕上传和许多其他功能和选项

    jQuery.filer - 简单的 HTML5 文件上传器,一个 jQuery 插件工具,它完全改变了文件输入并使其具有多个文件选择、拖放支持、不同的验证、缩略图、图标、即时上传、打印屏幕上传和许多其他功能和选项. | 特征 完全...

    servlet+jquery实现文件上传进度条示例代码

    本文简单记录下如何弄进度条,以及一些上传信息,比如文件的大小,上传速度,预计剩余时间等一些相关信息。代码是匆忙下简单写的,一些验证没做,或代码存在一些隐患,不严谨的地方。本文代码只供参考。 进度条的...

    超实用的jQuery代码段

    9.16 使用jQuery验证用户年龄 9.17 按照首字母进行元素排序 9.18 获取URL地址的Hash参数 9.19 避免多行文本溢出的算法 9.20 随机选择一个元素 9.21 替换&bnsp;空字符的方法 9.22 序列化表单到JSON数据 9.23 获取...

    django-easy-avatar:一个超级简单的 AJAX 文件上传应用程序,可轻松存储用户个人资料的头像

    django-easy-avatar 使用 jQuery 进行 ajax 文件上传和验证。 该插件还使用 Pillow 进行图像处理,以在保持正确的纵横比的同时调整图像大小 @ 100px X 100px。 它还使用标准的 HTML5 上传进度来显示上传状态。 如果...

    JAVA上百实例源码以及开源项目

     用JAVA开发的一个小型的目录监视系统,系统会每5秒自动扫描一次需要监视的目录,可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...

    assignment5.0:CS 008 最终项目

    上传了相应的六张图片中的四张,以及 CSV 文件。 调整 CSS 以使 img 大小具有响应性。 承诺 5:对 CSS 样式表的重大更改,尤其是导航栏。 对 index.html 的小改动 Commit 6:修改nav.php中PHP代码的逻辑。 修改后...

    JAVA上百实例源码以及开源项目源代码

     用JAVA开发的一个小型的目录监视系统,系统会每5秒自动扫描一次需要监视的目录,可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...

    文章管理系统

    5.修复后台服务器文件管理,文件总大小超过几G会出现页面程序错误BUG 6.完善后台JS复制事件 7.修复其他BUG (1~4更新点感谢白帽:seraph1984,通过乌云平台告知我们网钛。这些入侵漏洞只要有根据程序后台引导页提示...

    xheditor v1.0.0 rc2 build 100401

    xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 xhEditor is a simple,small,fast WYSWYG(What You See ...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part1

    注意:由于文件大小为111MB,但本人的上传权限只有60MB,所以分开两部分压缩上传。解压前必须与part2一起解压。part2在本人的资源里可以找到:http://download.csdn.net/user/lxm0918 第1章 服务器控件概述及开发...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    注意:由于文件大小为111MB,但本人的上传权限只有60MB,所以分开两部分压缩上传。解压前必须与part2一起解压。part2在本人的资源里可以找到:http://download.csdn.net/user/lxm0918 第1章 服务器控件概述及开发...

    WebIM_Ajax框架

    客户端使用 AJAX 心跳包拉数据,应用 JQuery 框架实现页面效果; 技术点: 1.CH2.Ajax 框架 2.动态js 3.动态css 4.jsonp跨域 5.iframe跨域 6.心跳包 7.ajax上传图片 8.裁切图片 9.js表单验证 10.悬浮层拖拽 11.列表...

    asoft签到管理系统tykq3.5_build20110125

    4、IE8下,未勾选“自定义级别安全设置”中-“将文件上载到服务器时包含本地目录路径”选项 5、遇到不明的500错误,你点浏览器 工具-&gt;internet选项-&gt;高级 ,找到“显示友好http错误信息” 去掉这个选项前面的勾...

    追梦企业网站管理系统 v1.4 UTF-8-0806

    同时支持自己计算上传文件的大小。可支持批量删除。 12.人才频道:提供给有需求人才的企业模块。可支持批量删除。 13.友情链接:可支持logo链接,和文字链接。可支持批量删除。 14.单页管理:可自主设置关键词,描述...

    ExtAspNet_v2.3.2_dll

    -增加土耳其语言资料文件(feedback:abdullaharslan)。 -Grid的BoundField增加NullDisplayText属性,用于处理数据库中的null值,如果没有设置则默认为空字符串。 -修正DatePicker中的一个bug(31/01/2010将会返回...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

Global site tag (gtag.js) - Google Analytics