Html input file控件使用accept过滤 限制的文件类型

于 2015-12-15 16:01:23 发布 1479 收藏 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
海绵宝宝爱吃菠萝派
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
input 上传文件类型
高山景行，一尘不染
03-31 430
*.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 Sty...
HTML input file控件限制上传文件类型_动力节点Java学院整理
12-14
网页上添加一个input file HTML控件： <input id="File1" type="file" /> 默认是这样的，所有文件类型都会显示出来，如果想限制它只显示我们设定的文件类型呢，比如“word“,”excel“,”pdf“文件　 解决...
type=file上传文件时accept限制文件类型
guoqkmiss的博客
10-18 3898
accept限制上传文件类型 < input type=“file” accept="" /> accept的值为： 格式 accept类型 *.3gpp audio/3gpp, video/3gpp *.ac3 audio/ac3 *.asf allpication/vnd.ms-asf *.au audio/basic *.css text/css ...
input file accept，上传文件、下载文件类型限制格式 ；常用MIME类型列表，支持 apk,exe,.woff,.ipa
青颜的天空的博客
06-02 3758
常用MIME 文件拓展名 MIME类型 .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document .xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xltx application/vnd.openxmlformats-officedocument.spreadsheetml.template
关于input file 的 accept 属性
wing
06-01 4215
在上传文件的时候，需要限制指定的文件类型，accept这个属性，只在FF和chrome中有效。那么accept能限制哪些文件呢？见下表。扩展名 MIME 描述*.3gpp     audio/3gpp, video/3gpp     3GPP Audio/Video*.ac3     audio/ac3     AC3 Audio*.asf     allpication/vnd.ms-asf  ...
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
Web页面中，在需要上传文件时基本都会用到<input type="file">元素，它的默认样式： chrome下： IE下： 不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。 根据用户的需求，设计风格，改变其...
input file上传文件样式支持html5的浏览器解决方案
12-13
最近在使用画布处理图像像素时用到了file上传控件，发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是...
使用trigger方式实现不用点击file类型的input弹出文件选择对话框
09-28
可以使用trigger方式实现不用点击file类型的input弹出文件选择对话框，因为javascript中没有原生的trigger函数，所以自己写了一个，喜欢的朋友可以参考下
vue中使用input[type=”file”]实现文件上传功能
12-29
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...
关于input的file 控件及美化
12-14
想要实现这一功能，用input的file控件来实现就好啦~ XML/HTML Code复制内容到剪贴板 <!doctype html>  <html lang="en">  <head>  <meta charset="UTF-8">  <title>Document...
HTML5 File接口在web页面上使用文件下载
01-19
File对象来自于用户使用input标签选择文件返回的FileList对象，来自于拖放操作的DataTransfer对象。File对象是一种特殊的Blob，它能够在任何能够使用Blob的上下文中使用。 要在web页面中使用文件，通常需要涉及到的...
input file获得文件根目录简单实现
01-20
其实问题很简单 index.html 复制代码 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”...
文件上传input file简便美化方案(css)
01-19
文件上传input在各个浏览器里表现形式都不一样： ie6   ie7,8,9 ff chrome 这里介绍一种简单实用的，在各种浏览器下表现一致的美化方法，效果如下： ie6无法美化，只能应用部分效果，如下： 选择文件后（以ff...
vue中使用input[type="file"]实现文件上传功能
10-18
主要介绍了vue中使用input[type="file"]实现文件上传功能，实现代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
input type file 使用ajax上传文件
08-16
注明：既然有了表单上传为什么又要ajax上传呢？因为表单上传过程中，整个页面就刷新了！ajax异步上传就可以达到只刷新局部位置，下面就简单看看ajax上传吧！
将input file的选择的文件清空的两种解决方案
12-12
input type=”file” id=”fileupload” name=”file” /> 第一种: 代码如下: var obj = document.getElementById(‘fileupload’) ; obj.select(); document.selection.clear(); 第二种： 代码如下: var obj = ...
Bootstrap File Input 控件离线文档
06-24
Bootstrap File Input 文件上传控件离线文档，完美结合bootstrap，支持ajax异步回调。
HTML5新增的8类INPUT输入类型介绍
09-28
主要介绍了HTML5新增的8类INPUT输入类型介绍,这8个新的输入类型分别是email类型、url类型、number类型、range类型、日期类型、search类型、tel类型,本文分别对它们一一介绍,需要的朋友可以参考下
vue input file文件上传
最新发布
06-01
### 回答1： Vue中实现文件上传可以使用HTML5的File API，具体步骤如下： 1. 在模板中添加一个input标签，type为file，用于选择文件： ``` <template> <div> <input type="file" @change="handleFileUpload"> </div> </template> ``` 2. 在Vue实例中定义一个方法，用于处理文件上传： ``` <script> export default { methods: { handleFileUpload(event) { const file = event.target.files[]; // 处理文件上传逻辑 } } } </script> ``` 3. 在handleFileUpload方法中，可以使用FormData对象将文件上传到服务器： ``` <script> export default { methods: { handleFileUpload(event) { const file = event.target.files[]; const formData = new FormData(); formData.append('file', file); // 发送文件上传请求 axios.post('/upload', formData).then(response => { // 处理上传成功的逻辑 }).catch(error => { // 处理上传失败的逻辑 }); } } } </script> ``` 4. 在服务器端接收文件上传请求，可以使用Node.js的multer中间件来处理文件上传： ``` const express = require('express'); const multer = require('multer'); const app = express(); const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { cb(null, file.originalname) } }); const upload = multer({ storage: storage }); app.post('/upload', upload.single('file'), (req, res) => { // 处理文件上传成功的逻辑 }); ``` 以上就是Vue中实现文件上传的基本步骤。 ### 回答2： Vue作为一种流行的JavaScript框架，提供了许多实用的组件和指令来帮助我们构建复杂的Web应用程序。其中，文件上传是我们在Web开发中经常遇到的一个问题。Vue提供了一个简单而方便的方法来处理文件上传。在Vue中，我们可以使用```<input type="file">```元素来接受文件上传。然而，这样做不能让我们选择多个文件，所以我们需要添加一个```multiple```属性。同时，还需要通过处理函数来处理文件上传的结果。 首先，在HTML中添加一个```<input type="file">```元素。给该元素设置id，方便后面的操作。 ``` <input type="file" id="fileupload" multiple> ``` 然后，在Vue组件的methods部分，添加一个处理函数。在这个处理函数中，我们将获取文件上传的目标，遍历文件并将它们存储在一个数组中。最后，我们可以将数组作为参数发送到后台进行处理。 ``` methods: { uploadFiles: function(){ var input = document.getElementById("fileupload"); var files = input.files; var filesArray = []; for(var i = 0; i < files.length; i++){ filesArray.push(files[i]); } this.$http.post('/api/upload', filesArray).then(res => { console.log(res.data) }) } } ``` 在这个例子中，我们使用了Vue的$http服务来将文件数组发送到服务器。如果上传成功，则在控制台输出一个成功的消息。最后，在Vue组件的HTML模板中，我们将处理函数绑定到文件上传按钮上。 ``` <button @click="uploadFiles()">上传文件</button> ``` 总的来说，Vue提供了易于使用和方便的方式来处理文件上传。通过组合Vue的API和HTML元素，我们可以完成文件上传的操作并把它们发送到服务器进行处理。当然，在实际项目中，我们还需要对上传的文件进行验证、压缩等操作，这些都需要根据具体的业务需求进行处理。 ### 回答3： Vue 是一款用来构建用户界面的渐进式 JavaScript 框架，在 Vue 中实现文件上传的方式有很多，其中一个比较常用的方式是使用 input file 元素来实现。 要实现文件上传，首先需要在 HTML 模板中添加一个 input file 元素，该元素的 type 属性设置为文件上传类型： ```html <input type="file" @change="handleFileUpload" /> ``` 这里通过 change 事件来监听文件上传的变化，并且调用 handleFileUpload 方法来处理文件上传的操作。handleFileUpload 方法的实现如下： ```javascript methods: { handleFileUpload(event) { const files = event.target.files; // 处理文件上传逻辑 } } ``` 在 handleFileUpload 方法中，首先需要获取到上传的文件列表，可以通过 event.target.files 来获取到上传的文件列表。接下来的逻辑就是针对这些文件进行处理了，具体处理逻辑根据需求而定。 如果需要将文件上传到服务器，可以使用 Axios 或者 Vue-resource 等第三方库来实现。例如，使用 Axios 来上传文件的示例代码如下： ```javascript import axios from 'axios'; methods: { handleFileUpload(event) { const files = event.target.files; const formData = new FormData(); for (let i = 0; i < files.length; i++) { formData.append('file', files[i]); } axios.post('/upload', formData).then(response => { // 处理上传成功的逻辑 }).catch(error => { // 处理上传失败的逻辑 }); } } ``` 在上传文件之前，需要将文件列表转换为 FormData 格式，并将其提交到服务器端。在 axios.post 方法中，第一个参数是上传的 URL，第二个参数是上传的数据，其中 FormData 类型的数据能够支持文件上传的操作。 需要注意的是，在进行文件上传的操作时，需要考虑到上传文件的大小、格式等问题，以及如何处理上传失败的情况。同时，在实际项目中，要结合具体的需求和业务场景，来选择最适合的文件上传方式和第三方库。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海绵宝宝爱吃菠萝派

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值