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

上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求:

      <form id="uploadForm" method="post" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required"
                        placeholder="请输入文件名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">资料类型:</label>
                <div class="layui-input-block">
                    <select name="datatypeid"  id="datatypeid"></select>
                </div>
                <input type="hidden" id="yincang">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上传文件</label>

                <div class="layui-input-block">
                    <input class="layui-input" type="file" name="file" onchange="fileChange(this);"/>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">

                    <input type="button" class="layui-btn" value="上传"
                        onclick="upload()" />
                </div>
            </div>
        </form>

js方法:

    <script type="text/javascript">
        var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
        function fileChange(target, id) {
            var fileSize = 0;
            var filetypes = [  ".doc", ".docx" ];//这里设置接受的文件类型
            var filepath = target.value;
            var filemaxsize = 1024 * 10;//接受的文件最大10M 
            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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

在.NET Core 中的并发编程

原文地址:http://www.dotnetcurry.com/dotnet/1360/concurrent-programming-dotnet-core 今...

46590
来自专栏web前端教室

5分钟学会javascript闭包(一)

先来定义,能读取其它函数内部变量的函数,它可以将函数内部和外部连接起来。 javascript有二种变量的作用域, 一是全局变量,二是局部变量 根据javasc...

18470
来自专栏极乐技术社区

一周小程序【资讯教程Demo】更新

轻松一刻 请不要误导我,我懂二进制 ? 微信小程序官方更新 小程序能力升级 微信推出官方教学小程序:基础功能为主 面向中老年人群 资讯与教程 微信小程序开发问...

45070
来自专栏web前端教室

javascript-购物车(2)

大家好,这几天一直加班,好久没有更新微信公众号了。 这次我们继续来讲解“购物车应用”,这次来讲解下它的路由功能。。 它是一个单页应用,所有的操作和页面跳转都是在...

46060
来自专栏企鹅号快讯

给初学者:JavaScript 的常见注意点

作者: CarterLi 原文:https://segmentfault.com/a/1190000012730162 上篇说了一些 JS 中数组操作的常见误区...

26260
来自专栏从流域到海域

《笨办法学Python》 第41课手记

《笨办法学Python》 第41课手记 本节课的代码有168行,但是冗长不代表困难,只是print里面的游戏说明内容太多,整体来说是很容易的,你要锻炼自己的耐心...

40270
来自专栏企鹅号快讯

轻松学习 JavaScript(8):JavaScript 中的类

英文: Dhananjay Kumar 译文:码农网/小峰 www.codeceo.com/article/easy-javascript-08-class...

20380
来自专栏从流域到海域

JavaScript闭包详解

JavaScript闭包详解 闭包就是由函数创造的一个词法作用域,里面创建的变量被引用后,可以在这个词法环境之外自由使用(维基百科)。 闭包,官方对闭包...

22680
来自专栏从流域到海域

Window环境下搭建Vue.js开发环境

笔者最近在进行前端的学习,在点完了HTML5、CSS3、JavaScript等技能树之后,是时候开始框架的学习了。目前为止前端框架呈现出React、Angula...

31870
来自专栏web前端教室

javascript-购物车(1)

这是之前文章提到过的JS购物车,当时简单的介绍了下它的思路和结构。 然后有同学发信息说,看的不太明白,最好能有代码,, 于是就录了这个视频教程,主要就是介绍它...

99560

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励