Html input file控件使用accept过滤文件

最新推荐文章于 2022-11-14 13:44:11 发布
最新推荐文章于 2022-11-14 13:44:11 发布
阅读量1.5k 收藏
点赞数
分类专栏： Html5
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/vivian_ljx/article/details/50316765

Html input file控件使用accept过滤文件

<input type="file" accept=".txt" >
弹出的文件选择框只显示txt文件

------------------------------------------------------------------------------

input type=file accept中可以限制的文件类型

accept这个属性，只在FF，ie10和chrome中有效。那么accept能限制哪些文件呢？见下表。 MIME 描述

*.3gppaudio/3gpp， video/3gpp3GPP Audio/Video
*.ac3audio/ac3AC3 Audio
*.asfallpication/vnd.ms-asfAdvanced Streaming Format
*.auaudio/basicAU Audio
*.csstext/cssCascading Style Sheets
*.csvtext/csvComma Separated Values
*.docapplication/mswordMS Word Document
*.dotapplication/mswordMS Word Template
*.dtdapplication/xml-dtdDocument Type Definition
*.dwgimage/vnd.dwgAutoCAD Drawing Database
*.dxfimage/vnd.dxfAutoCAD Drawing Interchange Format
*.gifimage/gifGraphic Interchange Format
*.htmtext/htmlHyperText Markup Language
*.htmltext/htmlHyperText Markup Language
*.jp2image/jp2JPEG-2000
*.jpeimage/jpegJPEG
*.jpegimage/jpegJPEG
*.jpgimage/jpegJPEG
*.jstext/javascript， application/javascriptJavaScript
*.jsonapplication/jsonJavaScript Object Notation
*.mp2audio/mpeg， video/mpegMPEG Audio/Video Stream， Layer II
*.mp3audio/mpegMPEG Audio Stream， Layer III
*.mp4audio/mp4， video/mp4MPEG-4 Audio/Video
*.mpegvideo/mpegMPEG Video Stream， Layer II
*.mpgvideo/mpegMPEG Video Stream， Layer II
*.mppapplication/vnd.ms-projectMS Project Project
*.oggapplication/ogg， audio/oggOgg Vorbis
*.pdfapplication/pdfPortable Document Format
*.pngimage/pngPortable Network Graphics
*.potapplication/vnd.ms-powerpointMS PowerPoint Template
*.ppsapplication/vnd.ms-powerpointMS PowerPoint Slideshow
*.pptapplication/vnd.ms-powerpointMS PowerPoint Presentation
*.rtfapplication/rtf， text/rtfRich Text Format
*.svfimage/vnd.svfSimple Vector Format
*.tifimage/tiffTagged Image Format File
*.tiffimage/tiffTagged Image Format File
*.txttext/plainPlain Text
*.wdbapplication/vnd.ms-worksMS Works Database
*.wpsapplication/vnd.ms-worksWorks Text Document
*.xhtmlapplication/xhtml+xmlExtensible HyperText Markup Language
*.xlcapplication/vnd.ms-excelMS Excel Chart
*.xlmapplication/vnd.ms-excelMS Excel Macro
*.xlsapplication/vnd.ms-excelMS Excel Spreadsheet
*.xltapplication/vnd.ms-excelMS Excel Template
*.xlwapplication/vnd.ms-excelMS Excel Workspace
*.xmltext/xml， application/xmlExtensible Markup Language
*.zipaplication/zipCompressed Archive
补充office2007以后的文件格式：
.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
jls
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java 文件对话框 过滤_java – Selenium关闭文件选择器对话框
weixin_29209825的博客
02-24 303
我们在Jenkins盒子(运行linux)上使用Selenium-Webdriver来驱动Firefox来测试一个相当复杂的Web应用程序. Web应用程序需要上传照片进行测试,我们已经通过将sendkeys用于输入文件对话框来实现.不幸的是(可能由于上传器的工作方式,它是通过XHR而不是FORM帖子进行上传和上传)文件选择器对话框永远不会关闭.虽然这有点令人讨厌,但在过去,测试仍然没有通过.从s...
关于input的file 控件及美化
12-14
美化file控件 .file-box { position: relative; width: 340px; } .txt { height: 22px; border: 1px solid #cdcdcd; width: 180px; } .btn { background-color: #FFF; border: 1px solid #CDCDCD; ...
input file控件限制上传文件类型
hughjin
05-26 1072
网页上添加一个input file HTML控件： 1 input id="File1" type="file" /> 　　默认是这样的，所有文件类型都会显示出来，如果想限制它只显示我们设定的文件类型呢，比如“word“,”excel“,”pdf“文件　 　　解决办法是可以给它添加一个acc
<input type="file" />浏览时只显示指定文件类型
数据库天地
12-21 1177
&lt;input type="file" /&gt;浏览时只显示指定文件类型 &lt;input type="file" accept="application/msword" &gt;&lt;br&gt;&lt;br&gt;accept属性列表&lt;br&gt; 1.accept="application/msexcel" 2.a
如何在html的form提交时排除某些input field的内容
qq_42000667的博客
11-14 1296
本人阐述了html的form表单里哪些input field在提交的时候会被发送到网络上，并介绍了两种方法，去掉name属性和调用remove方法来排除一些元素发送到网络
10个有用的HTML文件上传技巧
前端全栈开发者
11-18 3422
上传文件的能力是许多Web和移动应用的关键需求，从将照片上传到社交媒体上到将简历发布到工作门户网站上，文件上传无处不在。 作为一名Web开发人员，我们一定知道HTML提供了原生文件上传的支持，并借助于JavaScript的一点帮助。在HTML5中，File API被添加到DOM中。利用它，我们可以读取 FileList 和其中的 File 对象，这就解决了文件的多种用例，即在本地加载文件或通过网络发送到服务器进行处理等。 在本文中，我们将讨论HTML文件上传支持的10种用法，希望你觉得它有用。 在任何时候.
input file显示问题
soliy的专栏
05-15 2682
File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器2009-10-13每次写完的东西就忘了，下次用时还要重查资料重新写，这是今天写的一段测试代码，保留下来，记录给自已，同时分享给大家。目标：把下边的这个上传文件的input样式和文字改成一句话“上传图片”，同样实现上传图片的功能。难点1、不同浏览器的样式表现不同。2、文字如果只用click这样的方式是
HTML input file控件限制上传文件类型_动力节点Java学院整理
12-14
在HTML中，`<input type="file">`控件用于让用户选择本地文件进行上传。默认情况下，这个控件允许用户选择任何类型的文件。然而，在某些场景下，我们可能希望限制用户只能选择特定类型的文件，例如Word文档、Excel...
HTML input type=file文件选择表单元素.docx
11-22
在使用 input type=file 文件选择表单元素时，需要注意 enctype 属性的作用。enctype 属性规定了在发送到服务器之前应当如何对表单数据进行编码，默认的编码是 application/x-www-form-urlencoded。但是，对于文件...
html5 input属性使用示例
01-19
autofocus 当页面加载时，会获得焦点的一个按钮 x-webkit-speech 语音搜索,webkit内核才支持 accept 规定可上传的文件类型（仅适用type=file） alt 规定图片输入控件代替文本 autocomplete 规定是否使用输入字段的...
docx文档怎么排列图片_怎么把多张图片放在一个文档中 （多图转PDF文件）--一次设定所有图片大小，位置...
weixin_39695241的博客
11-05 1030
有如下多图，需要变成一个文件，每页一张图，图片大小一致。（一张张插入，改格式 太辛苦了）这里变成 了一个A4大小的PDF文件。百度可以用PPT（简单易用）,用PDF(正版需付费)，或者PS（不会），WORD文档替换 （失败了，替换不成功）今天用到的 方法1——图片插入PPT-转PDF： 新建PPT文件 视图- -幻灯片母版--（进入母版编辑）--页面设置 -自定义大小（比如A4，高29.7，宽21...
Html+CSS input type=file 文件类型限制属性 accept (HTML 5)
迎难而上
03-31 1万+
网页上添加一个input file HTML控件： 1 input id="File1" type="file" /> 　　默认是这样的，所有文件类型都会显示出来，如果想限制它只显示我们设定的文件类型呢，比如“word“,”excel“,”pdf“文件　 　　解决办法是可以给它添加一个acc
input的type=file上传文件accept中限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式
热门推荐
盏茶作酒的博客
08-12 2万+
（IE9及以下不支持下面这些功能，其它浏览器最新版本均已支持。） 1、允许上传文件数量 1. 允许选择多个文件：<input type="file" multiple> 2. 只允许上传一个文件：<input type="file" single> 2、上传指定的文件格式 如指定默认格式为gif、png： <input type="file" accept="image/gif,image/png" /> 1 如果不限制上传图片的格式，只限...
input accept属性筛选文件类型，及input file的选择的文件清空
weixin_40030173的博客
06-19 2440
一、accept属性 筛选文件类型 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: <input type="file" accept=".doc,.docx,.xls,.xlsx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" > 如果需要支持 .png 等，则在 accept 添加上既可，都逗号分隔。
如何去掉input type=file中的选择文件
七侠剑客的博客
05-28 1万+
使用input type=file时，发现总是有个默认的选择文件，如图所示： 对其进行样式修改发现，其默认的样式就是这样，并不能通过css样式进行修改。既然修改不了，我们为什么不换另一种思路对其进行解决？这里我们通过position：absolute绝对定位对其进行解决，思路是通过一个div绝对定位，位于input上方，通过对div的点击，进而监听触发input事件，从而解决去掉选择文件（这里其...
html ＜input type=file＞上传文件时，accept属性值汇总，支持文件格式，限制文件格式，限制上传图片的格式
PrimaryColor
01-14 1万+
一、示例标签1： <input type="file" accept="image/*" /> accept属性说明： image表示图片，*表示支持所有格式的图片文件。 二、示例标签2： <inputtype="file"accept="audio/mp4,video/mp4" class="uploadVideo"/> 多种格式，以逗号分隔。 前缀说明： text：文本文件。如格式：txt、csv、css、html，能直接使用记事本打开的......
input[type=file]如何屏蔽“未选择任何文件”
飞龙的博客
12-28 9207
        在input中file文件类型是用来选择上传文件用的，但是这个文件选择框有个提示信息——未选择任何文件，甚至还可能不显示自己设置的提示信息，并且还可能点击空白地方（设置透明的opacity: 0;），也可以进行选择文件的。          &lt;button onclick="chooseFile.click()"&gt;上传文件&lt;/button&gt; &lt;i...
写一个vue3 的vue-upload-component 上传图片的完整的美观的，多文件上传示例
最新发布
06-11
好的，下面是一个基于 vue-upload-component 的完整的美观的，多文件上传示例： 首先，我们需要安装 vue-upload-component： ``` npm install vue-upload-component --save ``` 然后，在 Vue 组件中引入和使用 vue-upload-component： ```html <template> <div> <vue-upload-component ref="upload" :url="uploadUrl" :headers="uploadHeaders" :multiple="true" :data="{userId: userId}" :accept="'image/*'" :extensions="allowedExtensions" :maxSize="maxFileSize" :withCredentials="true" @input-filter="handleInputFilter" @before-upload="handleBeforeUpload" @uploading="handleUploading" @upload-success="handleUploadSuccess" @upload-error="handleUploadError" > <template v-slot:default> <div class="upload-area"> <div v-if="!isUploading"> <i class="iconfont icon-add"></i> <span class="text">点击上传</span> </div> <div v-else> <i class="iconfont icon-loading"></i> <span class="text">上传中...</span> </div> </div> </template> </vue-upload-component> <div class="preview-area"> <div v-for="(file, index) in uploadedFiles" :key="file.id"> <img :src="file.url" class="preview-image"> <div class="preview-name">{{ file.name }}</div> <div class="preview-size">{{ fileSize(file.size) }}</div> <div class="preview-delete" @click="deleteFile(index)">删除</div> </div> </div> </div> </template> <script> import VueUploadComponent from 'vue-upload-component' export default { components: { VueUploadComponent }, data() { return { userId: '123456', uploadUrl: 'https://example.com/upload', uploadHeaders: { Authorization: 'Bearer ' + localStorage.getItem('token') }, allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], maxFileSize: 10 * 1024 * 1024, // 10MB isUploading: false, uploadedFiles: [] } }, methods: { handleInputFilter(uploadData) { // 文件过滤器 if (uploadData.file.type.indexOf('image/') !== 0) { return Promise.reject('只能上传图片文件') } return Promise.resolve(uploadData) }, handleBeforeUpload(uploadData) { // 开始上传前的回调 this.isUploading = true return uploadData }, handleUploading(uploadData) { // 正在上传的回调 console.log('uploading', uploadData.progress) }, handleUploadSuccess(uploadData) { // 上传成功的回调 console.log('success', uploadData.url) this.uploadedFiles.push({ id: uploadData.response.id, name: uploadData.file.name, size: uploadData.file.size, url: uploadData.response.url }) this.isUploading = false }, handleUploadError(uploadData) { // 上传失败的回调 console.error('error', uploadData.error) this.isUploading = false }, fileSize(size) { // 文件大小格式化 if (size < 1024) { return size + 'B' } else if (size < 1024 * 1024) { return (size / 1024).toFixed(2) + 'KB' } else { return (size / 1024 / 1024).toFixed(2) + 'MB' } }, deleteFile(index) { // 删除已上传的文件 this.uploadedFiles.splice(index, 1) } } } </script> <style> .upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 200px; height: 200px; border: 2px dashed #ccc; cursor: pointer; } .text { margin-top: 10px; font-size: 16px; color: #666; } .iconfont { font-size: 48px; color: #ccc; } .icon-add:before { content: '\e600'; } .icon-loading:before { content: '\e602'; animation: loading 1s infinite linear; } @keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .preview-area { display: flex; flex-wrap: wrap; margin-top: 20px; } .preview-image { width: 150px; height: 150px; object-fit: cover; margin-right: 10px; margin-bottom: 10px; } .preview-name { margin-top: 5px; font-size: 14px; color: #666; } .preview-size { margin-top: 5px; font-size: 14px; color: #666; } .preview-delete { margin-top: 5px; font-size: 14px; color: #f44336; cursor: pointer; } </style> ``` 上面的示例中，我们定义了一个上传区域的样式，当用户点击上传区域时，会触发 vue-upload-component 的文件选择框。用户选择图片文件后，会触发相应的回调函数，我们可以在这些回调函数中处理上传过程中的各种情况，比如文件过滤、上传前的准备工作、正在上传、上传成功、上传失败等。 接着，我们在组件中定义 uploadedFiles 数组，用于存储已上传的文件信息。当一个文件上传成功后，我们将该文件的信息添加到 uploadedFiles 数组中，并在页面上展示出来。用户可以通过点击删除按钮删除已上传的文件。 这个示例是一个多文件上传的例子，您可以根据实际需求进行修改和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值