文件上传判断大小和类型

曾经终败给现在 2022-08-28 07:43 180阅读 0赞

**html:**

<input type="file">

**javascript:**

// 实现文件上传的类型和大小约束
    document.querySelector("input").onchange = (e) => {
    
        let file = e.target.files[0];//文件
    
    
        // 判断文件大小
        if (file.size > 2 * 1024 * 1024) {
            alert("文件最大2M")
            return;
        }
    
        // file.name --day02-ES6.md
        //判断文件类型
        let imgArr = [".jpg", ".png", ".jpeg", ".gif"];
        if (imgArr.some(item => file.name.endsWith(item))) {
            //是图片
            let img = new Image()
            img.src = URL.createObjectURL(file);
            document.body.appendChild(img)
        } else {
            alert("请上传正确的文件类型")
        }
    }

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_15_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6e10d5a97c384ce5999d79e915561661.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/4fb12cb89ded48c2968935a9b2079983.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/4b2c40b313834c808675f9157f265180.png

发表评论取消回复

表情：

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

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

相关阅读

相关 HuTool之判断上传文件的文件类型

[文件类型判断-FileTypeUtil][-FileTypeUtil] [由来][Link 1] 在文件上传时，有时候我们需要判断文件类型。但是又不能简单的通过扩

深碍√TFBOYSˉ_/ 2023年08月17日 16:57/ 0 赞/ 109 阅读

相关 java 判断上传文件大小、MultipartFile、File

今天的积累都是为了更好的明天，加油！我是java程序员，大家可以关注我一起学习哈！ / 判断文件大小

古城微笑少年丶/ 2023年06月16日 13:52/ 0 赞/ 3 阅读

相关 js判断上传图片格式类型、尺寸大小

//判断图片类型 var f=document.getElementById("File1").value; if(f==" "){ ale

向右看齐/ 2022年10月02日 04:51/ 0 赞/ 219 阅读

相关 JavaScript实现限制文件上传类型和大小

JavaScript实现限制文件上传类型和大小 <title>文件上传前台控制检测程序 v0.6</title> <style> body

ゝ一纸荒年。/ 2022年09月12日 04:48/ 0 赞/ 275 阅读

相关文件上传文件大小和类型

文件上传文件大小和类型一、文件上传 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

偏执的太偏执、/ 2022年09月07日 05:58/ 0 赞/ 219 阅读

相关文件上传判断大小和类型

html: <input type="file"> javascript: // 实现文件上传的类型和大小约束 document.querySel

曾经终败给现在/ 2022年08月28日 07:43/ 0 赞/ 181 阅读

相关 HTML 上传文件、过滤类型以及显示大小

HTML： <h>文件上传只支持.xlsx格式</h> <form action="/upload" method="post" enctype="m

小鱼儿/ 2022年05月09日 13:24/ 0 赞/ 287 阅读

相关文件上传设置上传文件大小

控制台报错 org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededExcept

男娘i/ 2022年04月17日 05:08/ 0 赞/ 370 阅读

相关 js验证上传文件大小、类型等

<script> function check() { var str=document.chuan.wen.value; if (st

傷城~/ 2022年02月23日 20:08/ 0 赞/ 372 阅读

相关 SpringBoot 文件上传通过Content-Type和文件头判断文件类型

SpringBoot 文件上传通过Content-Type和文件头判断文件类型一、关于MIME MIME的全称是Multipurpose Internet Ma

矫情吗；*/ 2021年11月27日 02:32/ 0 赞/ 2063 阅读