input file accept指定文件类型 xls、xlsx、ppt、pptx、doc、docx、pdf、csv、图片、html

Missying55

已于 2024-07-30 16:57:53 修改

阅读量1.3w

点赞数 15

分类专栏：前端文章标签： html

于 2021-01-28 15:57:57 首次发布

本文链接：https://blog.csdn.net/Missying55/article/details/113342253

版权

前端专栏收录该内容

15 篇文章 2 订阅

订阅专栏

.xls

<input type="file" accept="application/vnd.ms-excel" />

.xlsx

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

.ppt

<input type="file" accept="application/vnd.ms-powerpoint" />

.pptx

<input type="file" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation" />

.doc

<input type="file" accept="application/msword" />

.docx

<input type="file" accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

.pdf

<input type="file" accept="application/pdf" />

.csv

<input type="file" accept=".csv" />

.png/.jpg/.jpeg/.etc

<input type="file" accept="image/*" />

.txt

<input type="file" accept="text/plain" />

.htm/.html

<input type="file" accept="text/html" />

.avi/.mpg/.mpeg/.mp4

<input type="file" accept="video/*" />

.mp3/.wav/.etc

<input type="file" accept="audio/*" />

.zip

<input type="file" accept="application/x-zip-compressed" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Missying55

关注关注

15
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

input=“file“ 浏览时只显示指定文件类型 xls、xlsx、csv

三夏之雪的博客

10-12

600

<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /> Valid Accept Types: For CSV files (.csv), use: <input type="file" accept=".csv" /> For Excel F

input的file类型的accept属性的值

zx_view的博客

04-17

2750

属性值值描述 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。 image/* 接受所有的图像文件。 MIME_type 一个有效的 MIME 类型，不带参数。请参阅IANA MIME 类型，获得标准 MIME 类型的完整列表。在上传文件的时候，需要限制指定的文件类型，accept这个属性，只在FF和chrome中有效。那么accept能限制哪些文件呢？见下表。扩展名 MIME 描述 *.3gpp aud..

参与评论您还未登录，请先登录后发表或查看评论

读取各类文件内容(doc,docx,ppt,pptx,xls,xlsx,pdf,txt等)

04-10

使用poi,pdfbox读取doc,docs,ppt,pptx,xls,xlsx,pdf,txt等各类文件内容,包含代码和jar包

【＜input type=“file“＞】accept属性

最新发布

weixin_45439337的博客

08-07

216

关于 form上传文件类型的筛选，如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性.设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式:1"file"如果需要支持 .png 等，则在 accept 添加上既可，都逗号分隔。

input类型为file时，accept为表格xlsl

平平无奇小码农的博客

11-30

1293

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"> 这样选择文件的时候只能看到xlsl表格文件

＜input type=“file“＞ accept属性筛选文件类型上传

Jason_WangYing的博客

06-17

2144

关于form表单shang 如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性. 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: 1 <input type="file"accept=".doc,.docx,.xls,.xlsx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordpr...

常用MIME类型

qq_40131635的博客

09-23

563

后缀名 MIME名称 *.3gpp audio/3gpp, video/3gpp *.ac3 audio/ac3 *.asf allpication/vnd.ms-asf *.au audio/basic *.css text/css *.csv text/csv *.doc application/msword *.dot application/msword *.dtd a.

html input file 设置选择文件类型

liuting52001的专栏

04-23

1416

可以直接设置input标签的accept属性来限制上传文件的类型 <input type="file" accept="application/msword" ><br><br>accept属性列表<br>12 1.accept=”application/msexcel” 2.accept=”application/msword” 3.accept=”application/pdf” 4.accept=”application/poscript” 5.ac

input 标签的 accept 属性、excel等文件类型

林中明月间丶

12-08

7712

https://blog.csdn.net/mp624183768/article/details/84761914?ops_request_misc=&request_id=&biz_id=102&utm_term=input%2520accept&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-2-84761914.nonecase https://blog.

文件上传input type=“file“之accept接受的类型汇总

米拉

11-03

2301

规定了用户可以在其中输入数据的输入字段。元素在元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。注意：accept 属性仅适用于提示：请不要将该属性作为您的验证工具。应该在服务器上对文件上传进行验证。accept 属性规定了可通过文件上传提交的服务器接受的文件类型。type 属性规定要显示的元素的类型。

android 操作office文档 doc docx xls xlsx ppt pptx pdf

03-23

在Android平台上，处理Office文档（如doc、docx、xls、xlsx、ppt、pptx）以及PDF文件是一项常见的需求。Android本身并不直接支持这些文件格式的处理，因此开发者需要借助第三方库或者Google Drive等在线服务来实现。...

Delphi提取docx,doc,xls,xlsx,ppt,ppts,pdf,eml,html,等文件内容文本

01-21

支持文件类型： A: pdf文件 B: office word文件 ".doc", ".odt", ".docx", ".dotm", ".docm" C: wps文档 ".wps" D: office excel文件 ".xls", ".xlsx", ".xlsm", ".xltm" E: wps表格 ".et" F: office powerPoint文件...

react-native-doc-viewer：React Native Doc Viewer（支持文件格式：xls，ppt，doc，xlsx，pptx，csv，docx，png，jpg，pdf，xml，二进制...）

02-03

一个React Native桥模块：文件的文档查看器（pdf，png，jpg，xls，doc，ppt，xlsx，docx，pptx等） 2017年路线图下载用于大文件的Progess事件监听器Android 2018年路线图没有外部应用程序的Android文件 Windows ...

java 在线查看doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3

09-11

使用spring boot打造文件文档在线预览项目解决方案，支持doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及众多类文本如txt、html、xml、java、properties、sql、js、md、json、conf、ini、vue、php、py、...

html input file 设置文件类型

牛奔的博客

05-26

469

解决方案：使用input的accept属性指定接受文件类型 -----------更新--------------- 之前的代码有个缺点，打开文件窗口时会自动筛选文件夹下所有符合设定类型的文件，造成文件窗口延迟一定时间。优化的方法是列出你需要的详细类型，比如： For Image Files (.png/.jpg/etc), use: <input type="f...

关于input file 的 accept 属性

wing

06-01

4656

在上传文件的时候，需要限制指定的文件类型，accept这个属性，只在FF和chrome中有效。那么accept能限制哪些文件呢？见下表。扩展名 MIME 描述*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video*.ac3 audio/ac3 AC3 Audio*.asf allpication/vnd.ms-asf ...

<input type='file'> accept属性

文学超的博客

06-25

2万+

input标签是在前台开发中经常使用的，总结下其accept属性，即允许上传的文件类型。 input标签内置了很多允许上传的文件类型，只需要对应配置即可。 input type="file" accept="application/msword" > accept列表 1.accept="application/msexcel"2.accept="application/msword"3.

input的type=file上传文件accept中限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式

热门推荐

daponi的博客

09-04

4万+

（IE9及以下不支持下面这些功能，其它浏览器最新版本均已支持。） 1、允许上传文件数量 1. 允许选择多个文件：<input type="file" multiple> 2. 只允许上传一个文件：<input type="file" si...

Springboot + vue 点击查看文件多种类型doc、docx、xls、xlsx、pdf 代码示例

07-25

下面是一个简单的示例代码，演示如何在Spring Boot和Vue中实现点击查看多种类型文件（包括doc、docx、xls、xlsx、pdf）： 1. 后端Spring Boot代码： ```java @RestController @RequestMapping("/api/files") public class FileController { @GetMapping("/{fileName}") public ResponseEntity<Resource> downloadFile(@PathVariable String fileName) throws IOException { // 根据文件名获取文件路径 String filePath = "path/to/files/" + fileName; // 读取文件内容 Path path = Paths.get(filePath); Resource resource = new InputStreamResource(Files.newInputStream(path)); // 设置响应头，让浏览器能够正确解析文件类型 HttpHeaders headers = new HttpHeaders(); headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + fileName); // 返回文件内容和响应头 return ResponseEntity.ok() .headers(headers) .contentType(MediaType.APPLICATION_OCTET_STREAM) .body(resource); } } ``` 2. 前端Vue代码： ```vue <template> <div> <ul> <li v-for="file in files" :key="file.name"> <a @click="viewFile(file.name)">{{ file.name }}</a> </li> </ul> <div v-if="selectedFile"> <iframe :src="selectedFileUrl" width="100%" height="500px"></iframe> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { files: [], selectedFile: null }; }, methods: { getFileList() { axios.get('/api/files') .then(response => { this.files = response.data; }) .catch(error => { console.error(error); }); }, viewFile(fileName) { this.selectedFile = fileName; } }, computed: { selectedFileUrl() { return `/api/files/${this.selectedFile}`; } }, created() { this.getFileList(); } }; </script> ``` 以上示例中，后端的`FileController`定义了一个GET请求的接口`/api/files/{fileName}`，用于下载文件。前端的Vue组件中，通过调用后端接口获取文件列表，并为每个文件添加点击事件，点击时将文件名赋值给`selectedFile`，然后通过动态生成的URL来展示文件内容。请根据实际情况修改代码中的文件路径和URL路径。希望对您有所帮助！如有更多问题，请继续提问。