文档章节

验证上传文件的大小及支持的文件后缀名

jj无语ing
 jj无语ing
发布于 2016/12/07 18:41
字数 381
阅读 25
收藏 2

//1.首先介绍的是第一种方式(输入框为 <input  type=“file” id=“” >)
    /**
     * 获取文件后缀
     * [@param](https://my.oschina.net/hycky/blog/801658) id 上传元素id
     * @returns {String} 后缀名称
     */
    function getFileSuffix(id) {
        var imgFile = document.getElementById(id);
        if (imgFile.files[0]) {
            var imgFileName = imgFile.files[0].name;
            var suffix = imgFileName.substring(imgFileName.lastIndexOf('.') + 1).toLowerCase();

            return suffix;
        } else {
            return null;
        }
    }
      /**
     * 获取文件大小
     * [@param](https://my.oschina.net/u/2303379) id 上传元素id
     * @returns {*} 文件大小, 单位为MB
     */
function  getFileSize(id) {
        var imgFile = document.getElementById(id);
        if (imgFile.files[0]) {
            var size = imgFile.files[0].size / 1024; // 初始值单位为 kb
            return size;
        } else {
            return null;
        }
    }
    /**
     * 检验图片规格
     * [@param](https://my.oschina.net/u/2303379) id 上传元素id,max 图片大小
     * @returns {boolean} 是否符合规则
     */
    function validateImageFile(id, max) {
        var suffix = Utils.getFileSuffix(id);
        var size = Utils.getFileSize(id);

        if (suffix == null || size == null) {
            return false;
        }

        var imgSuffixs = ['jpg', 'png', 'jpeg','JPG','PNG','JPEG'];
        var idx = imgSuffixs.indexOf(suffix);
        return (idx > -1 && size <= max);
    }

2.第二种方式

  /**
     * 获取文件大小
     * @param imgFile 文件对象
     * @returns
     */
    function getSizeByFileObj(imgFile){
        if (imgFile.files[0]) {
            var size = imgFile.files[0].size / 1024 ; // 初始值单位为 kb

            return size;
        } else {
            return null;
        }
    }
  /**
     * 通过文件对象获取文件后缀
     * @param imgFile 文件对象
     * @returns {String} 后缀名称
     */
     function getFileSuffixByFileObj(imgFile) {
        if (imgFile.files[0]) {
            var imgFileName = imgFile.files[0].name;
            var suffix = imgFileName.substring(imgFileName.lastIndexOf('.') + 1).toLowerCase();
            return suffix;
        } else {
            return null;
        }
    }

  /**
     * 通过文件对象检验图片规格
     * @param imgFile 文件对象,max 图片大小
     * @returns {boolean} 是否符合规则
     */
     function validateImageByFileObj(imgFile, max) {
        var suffix = Utils.getFileSuffixByFileObj(imgFile);
        var size = Utils.getSizeByFileObj(imgFile);

        if (suffix == null || size == null) {
            return false;
        }
        //此处可设置支持的文件的后缀
        var imgSuffixs = ['jpg', 'png', 'jpeg'];
        var idx = imgSuffixs.indexOf(suffix);

        return (idx > -1 && size <= max);
    }

 

转载请注明出处!

© 著作权归作者所有

jj无语ing
粉丝 0
博文 24
码字总数 8189
作品 0
徐汇
程序员
私信 提问
文件上传如何合理地验证文件类型?

在网上搜了一下,一般都是通过文件后缀名判断,很显而易见的是用户通过修改后缀名来逃避,我想问的问题有两个: 还有什么验证文件类型的方法? 攻击者利用后缀名漏洞能造成什么样的危害? 在...

Bluven
2014/08/28
193
0
【DVWA】Web漏洞实战之File Upload

File Upload File Upload,即文件上传漏洞,一般的上传漏洞可能是未验证上传后缀 或者是验证上传后缀被bypass 或者是上传的文件验证了上传后缀但是文件名不重命名。 LOW 直接上传任意文件 ME...

bypass
2017/03/11
0
0
PhalApi-v1.3.2,一周年纪念版,轻量级接口框架

#PhalApi-v1.3.2 (一周年纪念版)发布,PHP轻量级开源接口框架# ##[前言]## 时隔一年PhalApi已经一岁了,从无到有在到活跃人数350+的社区,到28+落地项目,实用拓展17+,一切都离不开各位小伙伴的...

喵了_个咪
2016/01/09
1K
5
ajaxFileUpload图片上传、限制后缀和张数 带参数

ajaxFileUpload图片上传、限制后缀和张数 带参数 HTML: <input type="file" name="img" id="fileToUpload" style="width:180px;" onchange="ajaxFileUpload(this);" /><span class="info">(......

markYun
2013/09/07
7.9K
1
Spring Boot基础教程12-web应用开发-文件上传

一、Spring Boot 默认使用springMVC包装好的解析器进行上传 二、添加代码 文件: @Controller @RequestMapping(value = "/file")...

芝麻绿豆
2017/04/06
210
0

没有更多内容

加载失败,请刷新页面

加载更多

社区投稿 | 线程简介和 MySQL 调试环境搭建

作者:高鹏 文章末尾有他著作的《深入理解MySQL主从原理 32讲》,深入透彻理解MySQL主从,GTID相关技术知识。 本文节选自《深入理解MySQL主从原理》第29节 注意:本文分为正文和附件两部分,...

爱可生
19分钟前
4
0
DDOS攻击可以分为什么类型?怎么样才能解决?

DDoS 是一种多源网络攻击,其目的是针对终端用户扰乱其网络的资源或服务。其不断进化的复杂性能够造成各种各样的伤害,例如欺诈以及勒索等。DDoS 攻击通常透过多重受损的系统或者装置注入殭尸...

云漫网络Ruan
22分钟前
3
0
从零开始入门 K8s| 阿里技术专家详解 K8s 核心概念

作者| 阿里巴巴资深技术专家、CNCF 9个 TCO 之一 李响 一、什么是 Kubernetes Kubernetes,从官方网站上可以看到,它是一个工业级的容器编排平台。Kubernetes 这个单词是希腊语,它的中文翻译...

阿里巴巴云原生
22分钟前
3
0
修改和编译spring源码,构建jar(spring-context-4.0.2.RELEASE)

上周在定位问题时,发现Spring容器实例化Bean的时候抛出异常,为了查看更详细的信息,决定修改spring-context-4.0.2.RELEASE.jar中的CommonAnnotationBeanPostProcessor类的代码,在里面打印...

程序员欣宸
25分钟前
2
0
MongoDB集群配置

MongoDB集群配置 2019年06月30日 13:21:05 2014Team 阅读数 77更多 分类专栏: MongoDB 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文...

linjin200
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部