js 限制 input 文件上传的大小和格式

梦里梦外; 2021-06-26 16:06 681阅读 0赞

最近在项目中需要一些文件大小和格式的校验，整理了一下作为日后的参考

废话不多说，上代码：

Javascript:

//验证上传文件大小和类型
     
    /** * * @param {this} value_ [获取input对象，一般为this] * @param {[number]} size_ [文件限制的大小，单位为kb] * @param {[string]} type_ [文件类型，当前支持image和office] * @param {[function]} callback [验证通过的回调] */
     
    function fileValid (value_, size_, type_, callback) { 
        var file = value_.files[0]
        var fileSize = (file.size / 1024).toFixed(0)
        var fileType = value_.value.substring(value_.value.lastIndexOf("."))
     
        if (fileSize > size_) { 
            alert('文件过大')
            return false
        }
     
        switch (type_) { 
            case 'image':
                if (!fileType.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) { 
                    alert('请上传图片')
                    return false;
                }
                break;
            case 'office':
                if (!fileType.match(/.doc|.docx|.xls|.xlsx|.ppt|.pptx/i)) { 
                    alert('请上传word、excel或ppt文件')
                    return false;
                }
                break;
            default:
                console.error('type_参数设置不正确！')
                return false;
                break;
        }
     
        callback()
    }

HTML:

<input type="file" id="upload-file">
     
    <script> $('#upload-file').change(function() { fileValid(this, 2048, 'image', function() { alert('success') }) }) </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，681人围观）

还没有评论，来说两句吧...

相关阅读

相关 iis上传文件大小限制

iis上传文件大小限制在web.config文件中加入如下语句： <security> <requestFiltering> <r

深藏阁楼爱情的钟/ 2024年04月06日 14:10/ 0 赞/ 20 阅读

相关 JS实现限制input上传文件的大小和格式

场景在实现Excel导入数时，需要上传excel格式的文件。在前端js进行判断，限制上传文件的大小和格式。实现 html页面代码可以通过accept属性来

偏执的太偏执、/ 2023年10月18日 15:50/ 0 赞/ 84 阅读

相关 JS_input file实现多选和限制文件上传类型，获取文件上传的文件名

<!-- accept 并未真正的实现限制上

向右看齐/ 2022年11月21日 15:00/ 0 赞/ 470 阅读

相关 springboot 文件上传大小限制

错误信息 the request was rejected because its size (13472920) exceeds the configured maximu

╰+哭是因爲堅強的太久メ/ 2022年04月23日 00:36/ 0 赞/ 298 阅读

相关 SpringBoot 配置上传文件大小限制

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: Th

迈不过友情╰/ 2022年03月14日 19:46/ 0 赞/ 280 阅读

相关 input上传文件格式限制

accept值 > “application/vnd.ms-excel ,application/vnd.openxmlformats-officedocument.sp

本是古典何须时尚/ 2021年09月07日 06:20/ 0 赞/ 664 阅读

相关 js上传文件；input上传文件；

html原生上传文件方式1： ![在这里插入图片描述][20210324233047985.gif] <!DOCTYPE html> <html>

小灰灰/ 2021年09月07日 06:20/ 0 赞/ 574 阅读

相关关于上传文件的大小限制

Springboot项目关于上传文件的大小限制 1，第一种处理方式 application.properties中添加 maxFileSize 是单个文件大小

梦里梦外;/ 2021年09月01日 07:00/ 0 赞/ 518 阅读

相关 js input文件上传

(1)设置类型type='file' 属性: accept='格式1,格式2' 前台筛选文件格式允许所有图片格式:"image/

柔光的暖阳◎/ 2021年07月25日 00:15/ 0 赞/ 528 阅读

相关 js 限制 input 文件上传的大小和格式

最近在项目中需要一些文件大小和格式的校验，整理了一下作为日后的参考废话不多说，上代码： Javascript: //验证上传文件大小和类型

梦里梦外;/ 2021年06月26日 16:06/ 0 赞/ 682 阅读