HTML <input> accept 属性

html 复制代码
<input type="file" id="upload" accept="application/pdf">

作用:

accept 属性用于指定 <input type="file"> 元素允许用户选择的文件类型。

在这里,accept属性的值为"application/pdf",意味着文件选择对话框仅允许用户选择PDF文件。如果用户尝试选择其他类型的文件,这些文件将不会被显示在文件选择对话框中(具体行为可能因浏览器而异)

用法:

如需规定多个值,需使用逗号分隔
html 复制代码
<input type="file" accept="image/*, .pdf">

这个 accept 属性值表示输入字段允许选择所有图像类型文件以及 PDF 文件。

取值:

它的值可以是 MIME 类型、文件扩展名、或两者的组合。以下是一些常见的值和格式:
MIME 类型(标准 MIME 类型的完整列表
  • 图像文件

    • image/*:接受所有图像类型(如 JPEG、PNG、GIF)。
    • image/jpeg:接受 JPEG 文件。
    • image/png:接受 PNG 文件。
    • image/gif:接受 GIF 文件。
  • 音频文件

    • audio/*:接受所有音频类型(如 MP3、WAV)。
    • audio/mp3:接受 MP3 文件。
    • audio/wav:接受 WAV 文件。
  • 视频文件

    • video/*:接受所有视频类型(如 MP4、WebM)。
    • video/mp4:接受 MP4 文件。
    • video/webm:接受 WebM 文件。
  • 文档文件

    • application/pdf:接受 PDF 文件。
    • application/msword:接受 Microsoft Word 文件(.doc)。
    • application/vnd.openxmlformats-officedocument.wordprocessingml.document:接受 Microsoft Word 文件(.docx)。
文件扩展名
  • 多个文件类型

    • *.jpg, *.jpeg, *.png:接受 JPEG 和 PNG 文件。
    • *.pdf, *.docx:接受 PDF 和 DOCX 文件。
  • 所有文件类型

    • */*:接受所有文件类型。

注意:

accept 属性仅适用于 <input type="file">。

提示:

请不要将该属性作为您的验证工具。应该在服务器上对文件上传进行验证。

accept 属性的主要目的是为了引导用户选择适当类型的文件,但它不能完全阻止用户选择不符合要求的文件类型。客户端和服务器端的文件验证是必要的,以确保文件类型符合预期。

相关推荐
小白小白从不日白13 分钟前
react 组件化开发_生命周期_表单处理
前端·react.js
weixin_4177599923 分钟前
97-java流式处理优点
java·开发语言
AskHarries26 分钟前
Spring Boot集成Akka Cluster实现在分布式节点中执行任务
java·spring boot·maven·akka
计算机编程-吉哥26 分钟前
计算机毕业设计 网上书店系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
java·spring boot·毕业设计·毕业论文·计算机毕业设计选题·计算机毕业设计开题报告·网上书店系统
我爱豆子34 分钟前
Leetcode Hot 100刷题记录 -Day14(矩阵置0)
java·算法·leetcode·矩阵
Simorel36 分钟前
html限制仅有一个音/视频可播放
javascript·html·音视频
程序员古德38 分钟前
《论负载均衡技术在Web系统中的应用》写作框架,软考高级系统架构设计师
前端·系统架构·负载均衡
方圆师兄41 分钟前
k8s 常见问题梳理
java·kubernetes
骆晨学长1 小时前
基于Springboot的校园防疫管理系统的设计与实现
java·spring boot·后端
java1234_小锋1 小时前
免费分享一套SpringBoot+Vue学生信息管理系统【论文+源码+SQL脚本】,帅呆了~~
java·springboot·java毕业设计·学生信息·java学生信息·springboot学生信息·vue学生信息