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

accept="application/msexcel,application/msword,application/pdf,image/jpeg,image/png,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document"

 

<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

  • 6
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
下面是一个简单的示例代码,演示如何在Spring Boot和Vue实现点击查看多种类型文件(包括docdocxxlsxlsxpdf): 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路径。希望对您有所帮助!如有更多问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值