程序员经验分享-hwhale

如何在 HTML5 中验证仅允许“输入类型=“文件””JPG、GIF 或 PNG？ [复制]

2024-02-21

可能的重复：
使用时限制文件格式？ https://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file

我需要使用 HTML5pattern属性只允许 JPG、GIF 和 PNG 文件存在<input type="file">元素。

我目前有这种模式，但它不起作用：

<input type="file" class="input-file" id="tbinstUploadFile0" name="tbinstUploadFile0" placeholder="Please insert an image file..." pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)">

这个正则表达式模式与 HTML5 不兼容？如何测试有效的 HTML5 正则表达式模式？


尝试类似的东西

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Click 此处查看最新的浏览器兼容性表 http://caniuse.com/#feat=input-file-accept

现场演示here http://jsfiddle.net/rb1n9bfe/

要仅选择图像文件，您可以使用此accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

现场演示here http://www.wufoo.com/html5/attributes/07-accept.html

Only gif, jpg and png will be shown, screen grab from Chrome version 44 Only gif, jpg and png will be shown, screen grab from Chrome version 44

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

regex

html

如何在 HTML5 中验证仅允许“输入类型=“文件””JPG、GIF 或 PNG？ [复制] 的相关文章

  • div 之间的额外空间从何而来？

    http www lethalmonk6 byethost24 com index html http www lethalmonk6 byethost24 com index html 如果您使用 firebug 检查 项目链接 div

  • 从 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio

  • preg_match 所有以@开头的单词？

    我对正则表达式不太确定 所以我不得不问你 如何用 PHP 判断字符串中是否包含以 开头的单词 例如我有一个像 This is for codeworxx 这样的字符串 我很抱歉 但我没有任何起点 希望你能帮忙 谢谢 萨沙 好的 谢谢你的结果

  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲

  • 如何从 pandas 数据框中的列中删除字符串值

    我正在尝试编写一些代码 以逗号分隔数据帧列中的字符串 因此它成为一个列表 并从该列表中删除某个字符串 如果存在 删除不需要的字符串后 我想再次以逗号加入列表元素 我的数据框如下所示 df Column1 Column2 0 a a b c

  • 如何从iframe访问文档中的？

    I have an iframe 我在检查器元素中发现 img 标签位于具有 body 标签的 document 中 img src Images landingpage jpg 我需要访问此图像 landing page jpg 以便更改

  • WebSocket 无法与 DNS 配合使用

    我有一个网络应用程序 我正在使用 websockets 我在使用 ws myDomain com 作为 websocket 服务器的地址时遇到问题 这个问题很奇怪 因为我使用许多 PC 测试了连接 似乎这适用于大约 1 5 的 PC 当我将

  • bash 支持字边界正则表达式吗？

    我试图在再次添加该单词之前匹配列表中是否存在该单词 以避免重复 我正在使用 bash 4 2 24 并尝试以下操作 foo bmyword b also foo

  • ::after 内联 HTML 电子邮件？

    banner width 34px height 52px position relative color white font size 11px letter spacing 0 2em text align center float

  • 如何防止桌面浏览器（Chrome、Safari）缩放网页

    我尝试使用以下元视图端口标记来防止浏览器缩放 但这不起作用 我知道这是可能的 因为我的缩放在此网站上被阻止 未来主义 xyz http futurism xyz 该网站的视口标签是这样的

  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p

  • [Regex]::Replace() 和 -replace 有什么区别？

    我明白了之间的区别 Replace and replace 但是什么是 replace and Regex Replace 我测试了以下两个代码 但对我来说结果完全相同 我还提到了 PowerShell Cookbook O reilly

  • 删除匹配前的一个单词和一个单词

    匹配之前的一个单词可以是一组任何符号 例如 D E F 我有一个正则表达式 s w s XXX 输入示例 This is KKK M D D xXx PPP输出示例 This is KKK PPP 所以我需要删除 XXX 之前的 1 个单词

  • CSS 选择器：Active 不适用于 IE8 中的子元素单击

    我有以下 HTML 结构 div class wrapper div class control clickable img src logo png div div 以及以下 CSS control border 1px solid 00

  • 推文按钮不出现

    我正在尝试向 html 页面添加一个 tweet 按钮 我使用 Twitter 按钮生成器中的官方代码 http twitter com about resources buttons tweet http twitter com abou

  • 在 Chrome 中为

    我已经看到这个问题多次出现 但没有任何明确的解决方案 我正在加载一个简单的视频

  • 使用 # 时锚点 标签在 Chrome 中不起作用

    这是我在页面上使用的代码 li a href explore Sound Sound a li 在所有页面上出现的菜单中 a a 在我想要链接的页面上 我尝试过使用 id 将内容添加到标签中 但仅在 Chrome 中 浏览器不会向下滚动到该

  • Next.js：错误：React.Children.only 期望接收单个 React 元素子元素

    我有一个名为Nav inside components目录及其代码如下所示 import Link from next link const Nav gt return div a Home a a About a div export d

  • 水平和垂直居中 div 位于页面中间，页眉和页脚粘在页面顶部和底部

    我正在尝试制作一个具有固定高度页眉和页脚的页面 页眉位于屏幕顶部 100 宽度 页脚位于底部 100 宽度 我想将一个具有可变高度内容的 div 居中放置在页眉和页脚之间的空间中 在下面的 jsfiddle 中 如果内容比空格短 它会起作用

  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum

随机推荐

热门标签