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

为什么80%的码农都做不了架构师？>>>   

//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);
    }

 

转载请注明出处！

转载于:https://my.oschina.net/hycky/blog/801658