`

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多文件上传并获取大小与格式代码

    本文将深入探讨如何使用jQuery实现多文件上传功能,并在此过程中获取每个文件的大小和格式信息。 首先,要实现多文件上传,我们需要一个HTML表单,通常包含一个`&lt;input&gt;`元素,其`type`属性设置为`file`,并且`...

    jquery 文件上传资料

    **jQuery 文件上传技术详解** 在Web开发中,文件上传是一个常见的功能,特别是在用户需要提交图片、文档等数据时。jQuery,作为一个广泛使用的JavaScript库,提供了许多方便的插件来简化这个过程,使得文件上传变得...

    jquery uploadify java文件上传

    **jQuery Uploadify与Java文件上传** 在Web开发中,文件上传功能是不可或缺的一部分。`jQuery Uploadify`是一款基于JavaScript和jQuery的插件,它提供了一种优雅的方式来进行多文件上传,具有良好的用户体验和丰富...

    jQuery多文件上传并获取大小与格式代码.zip

    综上所述,"jQuery多文件上传并获取大小与格式代码.zip"是一个完整的前端文件上传解决方案,包括了文件选择、验证、异步上传和UI反馈等多个关键环节。对于想要在自己的项目中实现类似功能的开发者来说,这是一个很好...

    jQuery+php实现ajax文件即时上传

    在现代Web开发中,用户体验是至关重要的,而Ajax(异步...例如,设置文件类型限制、大小限制,以及验证文件名和内容的安全性。总的来说,这个主题涵盖了前端与后端的协同工作,以及如何利用Ajax提升用户体验。

    Jquery上传文件MyUpload

    《Jquery上传文件MyUpload详解》 在网页开发中,文件上传功能是不可或缺的一部分,而Jquery作为一款广泛使用的JavaScript库,提供了丰富的插件来简化这一过程。本篇文章将深入探讨Jquery上传文件插件——MyUpload,...

    JQuery文件上传支持多文件上传可预览

    在实际应用中,开发者可以通过修改jQuery-File-Upload的配置项来调整上传行为,例如设置文件类型限制、上传大小限制、文件名重命名规则等。此外,还可以自定义上传按钮样式、预览模板等,以满足不同设计需求。 总之...

    jquery 文件批量上传控件

    《jQuery文件批量上传控件详解》 在网页开发中,用户交互体验的提升往往离不开高效、便捷的文件上传功能。jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来增强这一功能,其中“jQuery文件批量上传控件”...

    jquery实现多附件上传

    8. **服务器端处理**:无论是否使用插件,服务器端都需要处理上传的文件,这可能涉及到文件存储、权限验证、大小限制、类型检查等多个方面。 实现多附件上传涉及的技术点较多,包括前端的jQuery、HTML5 File API、...

    jquery Bootstrap样式文件上传特效.zip

    1. **文件选择**:使用jQuery,可以监听文件输入元素的change事件,当用户选择文件后立即进行处理,如验证文件类型、大小等。 2. **实时预览**:对于图片等支持预览的文件,可以使用HTML5的File API读取文件内容,...

    struts2+jquery多文件上传显示进度条,可直接运行(非常强大)

    Struts2和jQuery结合实现的多文件上传功能是一种常见的Web开发技术,特别是在处理大量数据时,用户需要上传多个文件的情况。这个项目的核心是利用Struts2的Action支持和jQuery的AJAX功能,以及一个用于展示进度条的...

    jquery上传文件插件filestyle

    虽然jQuery Filestyle本身不直接处理这些安全问题,但开发者在使用时应结合后端验证和安全策略来确保用户上传的文件是安全的。 10. **社区支持和更新**:作为开源项目,jQuery Filestyle通常会有活跃的社区支持,...

    jQuery css3文件上传动画界面代码

    同时,为了保护用户隐私和防止恶意文件上传,需要在服务器端进行文件类型和大小的验证。 在提供的文件`texiao2840_1560680851`中,可能包含了HTML结构、jQuery脚本和CSS样式等资源,通过解析这些文件,我们可以深入...

    jQuery移动端图片文件上传插件.zip

    10. **自定义配置**:为了满足不同项目的需求,插件通常提供一系列可配置选项,比如设置上传URL、指定文件类型、调整上传大小限制、设置按钮样式等。 通过以上这些技术,jQuery移动端图片文件上传插件能够为开发者...

    JQUERY上传文件插件

    **jQuery上传文件插件**是一种基于JavaScript库jQuery的实用工具,用于在网页上实现便捷的文件上传功能。这种插件通常包含丰富的自定义选项和事件处理,使得文件上传过程更加用户友好,支持Ajax异步上传,提高用户...

    jquery uploadify 实现批量上传,带进度显示,判断文件大小

    `jQuery Uploadify`是一款基于jQuery的插件,它允许开发者实现文件的批量上传,并且带有进度显示功能,同时能对上传文件的大小进行判断,避免过大文件导致的问题。下面将详细介绍这个插件的使用和相关知识点。 ### ...

    jQuery图片上传插件支持多图批量上传与多文件批量上传控件

    本文将详细讲解“jQuery图片上传插件”,它支持多图批量上传和多文件批量上传功能,适用于各种网页应用。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等...

    jquery上传文件案例

    2. 绑定文件选择事件,当用户选择文件后进行预处理,如验证文件类型和大小。 3. 使用Ajax提交文件数据,可能包括使用FormData对象封装文件数据并设置适当的HTTP头。 4. 监听上传进度事件,更新用户界面的进度条。 5....

    asp.net+jquery.uploadify文件上传(异步上传)

    3. **文件类型检查**:验证上传的文件类型,只接受预期的类型,防止恶意文件上传。 4. **权限控制**:确保只有授权用户可以上传文件,并且上传的文件存放在安全的位置。 5. **异常处理**:捕获并处理可能出现的异常...

    ASP.NET jquery ajax无刷新上传文件demo

    `Default.aspx.cs` 则是对应的C#后台代码,可能包含了处理上传文件后的业务逻辑,比如验证文件大小、类型,或者保存到服务器的特定位置。 `Web.Config` 文件是ASP.NET应用程序的配置文件,里面可能会包含关于应用...

Global site tag (gtag.js) - Google Analytics