专栏首页闻道于事js判断文件类型大小并给出提示

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 条评论
登录 后参与评论

相关文章

  • JFinal极速开发框架使用笔记(二) 两个问题,一个发现

    最近给新人出了一个小测试,我也用JFinal框架做了一下,记录一下使用过程中遇到的坑和新学到的知识点 首先是遇到的两个小问题, 一个是用最新版的eclipse运...

    二十三年蝉
  • 短信接口发送验证码倒计时以及提交验证

    项目中找回密码的功能: 忘记密码,登录页面点击忘记密码,跳转页面输入用户名,如果用户名已经绑定手机号,后台调用短信接口给该用户绑定的手机发送短信,如果没有绑定手...

    二十三年蝉
  • IDEA使用

    最重要的: Ctrl+Shift+A  打开搜索 定位代码: 项目之间的跳转: ? 文件之间的跳转: 打开最近文件列表  Ctrl + E     打开最近修改...

    二十三年蝉
  • layui修改 form表单的 长度

    地道小菜鸟
  • Spring_Boot_mybatis plus连接数据库实现增删查改

    EmpAttr 自动生成代码请参考双剑合璧————Spring Boot + Mybatis Plus

    田维常
  • layui 表单 请求参数对象和数组同时传递向后台转载请标明地址谢谢!

    因为页面中的数据使用layui的form模块获取值,formData对象无法直接将多选框的值加入请求头,所以先将获取的多选按钮的值转为数组,然后使用

    用户5899361
  • thymeleaf中使用layui

    头部引入css,尾部引入js,定义两个模板(一个也可以,里面的碎片分开写,我喜欢写两个分别引入),注意th:fragment,fragment即碎片,可以在模板...

    小尘哥
  • layui布局 使用jquery的load后页面js失效

    用户5899361
  • JFinal极速开发框架使用笔记(二) 两个问题,一个发现

    最近给新人出了一个小测试,我也用JFinal框架做了一下,记录一下使用过程中遇到的坑和新学到的知识点 首先是遇到的两个小问题, 一个是用最新版的eclipse运...

    二十三年蝉
  • Layui form 表单(常用)

    layui-form div.layui-form-item label.layui-form-label div.layui-input-block

    用户5760343

扫码关注云+社区

领取腾讯云代金券