`

input type=file 文件类型限制属性 accept

阅读更多

最近开发移动端,上传图片处客户要求点击上传后,直接弹出相册和拍照功能。测试后发现加上文件类型限制即可,不过不同系统调用方式不同。

 

差异:苹果显示为文件和拍照,安卓为相册和拍照(想到的一种方法就是自定义调用)。不过这里是系统差异,我们暂时不管。

 

在上传文件的时候,需要限制指定的文件类型。

 

 

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

   accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。

 

accept可以指定如下信息:

*.3gpp

audio/3gpp, video/3gpp

3GPP音频/视频

*.ac3

audio/ac3

AC3音频

*.asf

allpication/vnd.ms-asf

高级流媒体格式

*.au

audio/basic

AU音频

*.css

text/css

层叠样式表

*.csv

text/csv

逗号分隔值

*.doc

application/msword

MS Word文档

*.dot

application/msword

MS Word模板

*.dtd

application/xml-dtd

文档类型定义

*.dwg

image/vnd.dwg

AutoCAD绘图数据库

*.dxf

image/vnd.dxf

AutoCAD绘图交换格式

*.gif

image/gif

图形交换格式

*.htm

text/html

超文本标记语言

*.html

text/html

超文本标记语言

*.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对象表示法

*.mp2

audio/mpeg, video/mpeg

MPEG音频/视频流,第二层

*.mp3

audio/mpeg

MPEG音频/视频流,第三层

*.mp4

audio/mp4, video/mp4

MPEG-4音频/视频

*.mpeg

video/mpeg

MPEG视频流,第二层

*.mpg

video/mpeg

MPEG视频流,第二层

*.mpp

application/vnd.ms-project

MS项目项目

*.ogg

application/ogg, audio/ogg

Ogg Vorbis

*.pdf

application/pdf

便携式文档格式

*.png

image/png

便携式网络图形

*.pot

application/vnd.ms-powerpoint

MS PowerPoint模板

*.pps

application/vnd.ms-powerpoint

MS PowerPoint幻灯片

*.ppt

application/vnd.ms-powerpoint

MS PowerPoint演示文稿

*.rtf

application/rtf, text/rtf

文本格式

*.svf

image/vnd.svf

简单的矢量格式

*.tif

image/tiff

标记的图像格式文件

*.tiff

image/tiff

标记的图像格式文件

*.txt

text/plain

纯文本

*.wdb

application/vnd.ms-works

MS Works数据库

*.wps

application/vnd.ms-works

工程文本文档

*.xhtml

application/xhtml+xml

可扩展的超文本标记语言

*.xlc

application/vnd.ms-excel

MS Excel图表

*.xlm

application/vnd.ms-excel

MS Excel宏

*.xls

application/vnd.ms-excel

MS Excel电子表格

*.xlt

application/vnd.ms-excel

MS Excel模板

*.xlw

application/vnd.ms-excel

MS Excel工作区

*.xml

text/xml, application/xml

可扩展标记语言

*.zip

aplication/zip

压缩的档案

 

..

分享到:
评论

相关推荐

    HTML input type=file文件选择表单元素.docx

    accept 属性可以用来指定浏览器接受的文件类型,也就是当我们打开系统的挑选文件弹框时,默认界面中展现的文件类型。例如:accept="image/jpeg",则界面中惟独显示jpg文件。 HTML input type=file 文件选择表单元素...

    input type=file 调取手机照相机和选择照片上传

    为了启用照相机功能,我们需要在 `input` 元素上添加 `accept` 属性,指定允许选择的文件类型。例如,如果我们只想让用户选择图片,可以这样写: ```html &lt;input type="file" accept="image/*" capture&gt; ``` `...

    vue中使用input[type=”file”]实现文件上传功能

    注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...

    input type=file 及时预览图片

    &lt;input type="file" id="imageUpload" accept="image/*"&gt; ``` 这里,`accept="image/*"` 参数限制了用户只能选择图像文件。`id="imageUpload"` 是为了方便我们通过JavaScript来访问这个元素。 接下来,我们需要...

    HTML+JAVA 手机端相册或者拍照上传到服务器,简单的代码样例(使用控件input type=file)

    HTML+JAVA 手机端相册或者拍照上传到服务器。前台代码部分:手机选择图片input type=file,通过form表单提交到后台;后台java代码部分:获取表单提交的文件和普通控件数据,将文件写入服务器某路径下

    jQuery实现input[type=file]多图预览上传删除等功能

    下面我们了解一下,多图上传时...input id=upload type=file accept=image/* multiple=multiple&gt; &lt;button class=btn&gt;点击上传&lt;/button&gt; &lt;div class=img-box&gt; &lt;!-- 存放预览图片 --&gt; &lt;/div&gt;

    HTML5新特性之type=file文件上传功能

    &lt;input type="file" accept="image/*"&gt; ``` 支持的类型包括音频、视频和图像,如`audio/*`, `video/*`, `image/*`,也可以指定具体的文件扩展名,如`.jpg`, `.png`等。 3. **必填验证** (required) `required`...

    js获取 input file 图片立即显示

    - 图片大小限制:为了防止内存溢出或加载时间过长,可以设置输入类型的`accept`属性限制文件类型和大小。 - 响应式设计:确保预览图片的尺寸适应不同设备和屏幕分辨率。 - 图片压缩:如果用户上传大尺寸图片,...

    vue中使用input[type="file"]实现文件上传功能

    然而,需要注意的是,在移动设备的iOS和Android平台上,浏览器可能不会强制执行`accept`属性的限制,所以在实际应用中,还需要通过JavaScript来进一步验证文件类型。 在Vue组件的`&lt;script&gt;`部分中,我们需要定义...

    HTML5视频上传(包含html5自带拍照,录像,音频,附件)

    在视频上传场景中,我们可以创建一个`&lt;input type="file"&gt;`元素,设置其`accept`属性为`.mp4, .webm, .ogg`等视频格式,以限制用户只能选择视频文件进行上传。 ```html &lt;input type="file" accept="video/mp4, ...

    input type=file 选择图片并且实现预览效果的实例

    在上面的HTML代码中,我们使用了一个input标签,type类型为file,accept属性指定了上传文件类型为image/*,multiple属性指定了可以选择多个文件。 接下来,让我们看看CSS样式文件: ```css #box{ width: 300px; ...

    HTML input file控件限制上传文件类型_动力节点Java学院整理

    &lt;input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /&gt; ``` `accept`属性值是一个逗号分隔的MIME类型列表或文件扩展名列表。在上面的例子中,`.xls`对应Excel文件,`.doc`对应Word文档,`.txt`对应纯文本...

    webview支持type="file" 打开相机和相册

    在Android中,我们可以使用`WebChromeClient`的`onShowFileChooser`方法,在用户点击`&lt;input type="file"&gt;`时弹出自定义的文件选择对话框,包括相机和相册选项。而在iOS中,我们需要实现`WKUIDelegate`的`webView(_:...

    上传控件input file 样式美化

    &lt;input type="file" accept="image/*"&gt; ``` 8. **多文件上传** 如果需要支持多文件上传,可以设置`&lt;input type="file"&gt;`的`multiple`属性。 ```html &lt;input type="file" multiple&gt; ``` 通过以上方法,我们可以对...

    解决RN 的 webview 组件不支持android客户端上传图片文件问题

    &lt;input type="file" accept="image/*" capture /&gt; ``` 4. **处理文件选择结果**: 当用户在Webview中选择了一个文件后,你需要在RN端处理这个事件。为此,需要在你的React组件中定义一个回调函数,比如`...

    Vue触发隐藏input file的方法实例详解

    1、使用input透明覆盖法  将input的z-index设置为1以上的...input type=file @change=picUpload($event) accept=image/* /&gt; .uploadImg { width: 100%; height: 1.46rem; position: relative; input { widt

    input file图片上传即时预览

    当我们设置`&lt;input type="file" accept="image/*"&gt;`时,用户只能选择图像文件。为了让用户在选择图片后能立即预览,我们需要利用JavaScript和HTML5的File API。 **1. HTML部分:** 创建一个`&lt;input type="file"&gt;`...

    关于input的file 控件及美化

    2. **文件类型限制**:使用`accept`属性可以限制用户只能选择特定类型的文件,例如图片、PDF等。 3. **预览功能**:对于图片或视频文件,可以添加一个预览区域,让用户在上传前查看选定的文件。 4. **进度条**:如果...

Global site tag (gtag.js) - Google Analytics