accept文件上传类型

博客介绍了上传文件时限制指定文件类型的方法,通过<input type=\file\ accept=\image/*\ />中的accept属性实现。还列举了accept可指定的多种文件类型信息,如图片、音频、视频、文档等,以及2007年后各文档需配置的accept属性值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在上传文件的时候,需要限制指定的文件类型。
<input type="file" accept="image/*" />   
       accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。

accept可以指定如下信息:

*.3gpp    audio/3gpp, video/3gpp    3GPP Audio/Video
*.ac3    audio/ac3    AC3 Audio
*.asf    allpication/vnd.ms-asf    Advanced Streaming Format
*.au    audio/basic    AU Audio
*.css    text/css    Cascading Style Sheets
*.csv    text/csv    Comma Separated Values
*.doc    application/msword    MS Word Document
*.dot    application/msword    MS Word Template
*.dtd    application/xml-dtd    Document Type Definition
*.dwg    image/vnd.dwg    AutoCAD Drawing Database
*.dxf    image/vnd.dxf    AutoCAD Drawing Interchange Format
*.gif    image/gif    Graphic Interchange Format
*.htm    text/html    HyperText Markup Language
*.html    text/html    HyperText Markup Language
*.jp2    image/jp2    JPEG-2000
*.jpe    image/jpeg    JPEG
*.jpeg    image/jpeg    JPEG
*.jpg    image/jpeg    JPEG
*.js    text/javascript, application/javascript    JavaScript
*.json    application/json    JavaScript Object Notation
*.mp2    audio/mpeg, video/mpeg    MPEG Audio/Video Stream, Layer II
*.mp3    audio/mpeg    MPEG Audio Stream, Layer III
*.mp4    audio/mp4, video/mp4    MPEG-4 Audio/Video
*.mpeg    video/mpeg    MPEG Video Stream, Layer II
*.mpg    video/mpeg    MPEG Video Stream, Layer II
*.mpp    application/vnd.ms-project    MS Project Project
*.ogg    application/ogg, audio/ogg    Ogg Vorbis
*.pdf    application/pdf    Portable Document Format
*.png    image/png    Portable Network Graphics
*.pot    application/vnd.ms-powerpoint    MS PowerPoint Template
*.pps    application/vnd.ms-powerpoint    MS PowerPoint Slideshow
*.ppt    application/vnd.ms-powerpoint    MS PowerPoint Presentation
*.rtf    application/rtf, text/rtf    Rich Text Format
*.svf    image/vnd.svf    Simple Vector Format
*.tif    image/tiff    Tagged Image Format File
*.tiff    image/tiff    Tagged Image Format File
*.txt    text/plain    Plain Text
*.wdb    application/vnd.ms-works    MS Works Database
*.wps    application/vnd.ms-works    Works Text Document
*.xhtml    application/xhtml+xml    Extensible HyperText Markup Language
*.xlc    application/vnd.ms-excel    MS Excel Chart
*.xlm    application/vnd.ms-excel    MS Excel Macro
*.xls    application/vnd.ms-excel    MS Excel Spreadsheet
*.xlt    application/vnd.ms-excel    MS Excel Template
*.xlw    application/vnd.ms-excel    MS Excel Workspace
*.xml    text/xml, application/xml    Extensible Markup Language
*.zip    aplication/zip    Compressed Archive

除了以上的类型外,2007后各文档如docx需配置的accept属性值如下:
 Extension MIME Type
.xlsx   application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltx   application/vnd.openxmlformats-officedocument.spreadsheetml.template
.potx   application/vnd.openxmlformats-officedocument.presentationml.template
.ppsx   application/vnd.openxmlformats-officedocument.presentationml.slideshow
.pptx   application/vnd.openxmlformats-officedocument.presentationml.presentation
.sldx   application/vnd.openxmlformats-officedocument.presentationml.slide
.docx   application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotx   application/vnd.openxmlformats-officedocument.wordprocessingml.template
.xlsm   application/vnd.ms-excel.addin.macroEnabled.12
.xlsb   application/vnd.ms-excel.sheet.binary.macroEnabled.12

### 如何在 el-upload 组件中设置 accept 属性以限制文件类型 在使用 `el-upload` 组件时,可以通过设置 `accept` 属性来限制用户上传的文件类型。该属性接受一个字符串,字符串内容为允许上传的文件类型扩展名或 MIME 类型,多个类型之间用逗号分隔。 以下是一个完整的示例,展示了如何通过 `accept` 属性限制文件类型为 JPEG 和 PNG 格式的图片: ```vue <template> <el-upload action="https://jsonplaceholder.typicode.com/posts/" accept=".jpg,.jpeg,.png" :on-change="handleChange" :file-list="fileList"> <el-button type="primary">点击上传</el-button> </el-upload> </template> <script> export default { data() { return { fileList: [] // 文件列表 }; }, methods: { handleChange(file, fileList) { console.log('当前选择的文件:', file); console.log('更新后的文件列表:', fileList); } } }; </script> ``` 在上述代码中,`accept=".jpg,.jpeg,.png"` 表示仅允许用户选择 `.jpg`、`.jpeg` 和 `.png` 格式的文件[^1]。如果用户尝试选择其他类型的文件,浏览器会自动拦截并提示用户选择正确的文件类型。 此外,还可以使用 MIME 类型来定义允许上传的文件类型。例如: ```vue <el-upload action="https://jsonplaceholder.typicode.com/posts/" accept="image/jpeg,image/png" :on-change="handleChange" :file-list="fileList"> <el-button type="primary">点击上传</el-button> </el-upload> ``` 在这里,`accept="image/jpeg,image/png"` 使用 MIME 类型来限制文件类型为 JPEG 和 PNG 图片[^3]。 需要注意的是,`accept` 属性仅用于前端限制文件类型,无法完全防止用户绕过限制上传不符合要求的文件。因此,在实际开发中,建议在后端再次验证上传文件的类型和大小,以确保安全性[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值