前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >bootstrap-fileinput踩坑-选择文件类型

bootstrap-fileinput踩坑-选择文件类型

作者头像
王小婷
发布于 2025-05-18 12:46:53
发布于 2025-05-18 12:46:53
5700
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

在使用插件上传图片的 时候会遇到这样 的一个bug,进入一个文件夹选择图片的时候,会自动选择png格式的图片,同一目录底下的,其他格式jpg,gif等类型会被自动屏蔽,这个时候就会造成用户操作的不便。

5640239-c2a095987c405a62.png
5640239-c2a095987c405a62.png

图一

那么,该如何修改让上传图片,图片选择的时候自动选择所有图片?

5640239-5e00de92116c124a.png
5640239-5e00de92116c124a.png

图二

注意到这样的一个属性accept 属性 accept 属性则是在点击选择文件之后,文件框里只会出现你写在accept 属性的后缀名的文件。

插件的部分属性说明

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
accept 属性只能与 <input type="file"> 配合使用。
它规定能够通过文件上传进行提交的文件类型。
这个属性和插件allowedFileExtensions属性看起来一样

图一: 加上accept 属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="file" name="image"  id="uploadImage"  accept="image/png,/image/jpeg,/image/jpg" />

图二: 去掉accept 属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="file" name="image"  id="uploadImage"  />

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-08-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档