1.原生的input type="file"不支持accept属性限制选择文件类型

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

环境：

统信uos系统 Linux 5.4.50-amd64-desktop #73 SMP Mon Aug 24 15:42:54 CST 2020 x86_64 GNU/Linux
奇安信浏览器 navigator.appVersion:"5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.128 Safari/537.36 Qaxbrowser"

问题：
项目中一处文件上传使用的是原生的input type=“file”。在上述环境下accept属性（限制选择文件的类型）不生效。经测试，在相同系统中Firefox支持。

解决方法：

退而求其次，没有办法的办法。既然input不能筛选，就在选完后用js判断用户选择的文件的类型。例：

/**
* 表单提交前的判断，符合要求的文件格式才提交，否在弹窗提示
*/
function submitForm() {if (checkFileTypeSuffix($("#ajxxExcel"), ".xls") || checkFileTypeSuffix($("#ajxxExcel"), ".xlsx")) {$("#fileForm").submit();} else {layer.msg('请选择.xls或.xlsx文件！', {icon: 2, time: 2000, shade: 0.3});}
}/**
* 判断文件类型后缀名
* @param selector jquery选择器，如 $("#ajxxExcel")
* @param type 要验证的文件类型后缀，如 ".xls"
* @returns {boolean}
*/
function checkFileTypeSuffix(selector, type) {var fileName = selector.val();if (fileName) {var index = fileName.lastIndexOf(".");var suffix = fileName.substring(index);return type === suffix;} else {return false;}
}

使用其他的上传控件替代。

web项目国产化踩坑相关推荐

qt5.15.2-银河麒麟-龙芯国产化-项目打包踩坑实录
qt5.15.2-银河麒麟-龙芯国产化-项目打包踩坑实录 linuxdeployqt几乎是唯一解决方案,网上各种自己写脚本根据ldd去拷贝的,最后大概率都是segment default-除非你是纯Q ...
瑞吉外卖项目笔记+踩坑1——基础功能
导航: [黑马Java笔记+踩坑汇总]JavaSE+JavaWeb+SSM+SpringBoot+瑞吉外卖+SpringCloud/SpringCloudAlibaba+黑马旅游+谷粒商城目录 1 ...
phpcmsV9-本地项目上线 - 踩坑篇
phpcmsV9-本地项目上线 - 踩坑篇使用phpcmsV9框架架构的项目,在本地上传到进行服务器部署的时候,多多少少会遇到一些问题. 这里就常见问题进行简单罗列,以及简单解答. 1. wamp集 ...
用Vue+Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅（上篇）
前言本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项 ...
用Vue Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅（上篇）
前言本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项 ...
vue+elementUI项目的踩坑~~持续更新
日常工作记录,如果对你有帮助请点亮小~心~心喔~~~ 接受礼貌的批评指导目录: 1.el-form只有一个搜索条件时页面刷新问题: 2.el-tree树形控件,给项目安装jsx语法: 3.el-ca ...
ABP中服务接口Web.Host部署踩坑
部署ABP.Web.Host后报如下错误: 后来解决方案是因为服务器没有安装.netframe4.6. 去官网下载了.NDP472-KB4054531-Web.exe 更新了.netframe4.7. ...
【scratchjr】开源项目开发踩坑之环境配置篇
开源项目地址如下: github托管项目地址:https://github.com/LLK/scratchjr 环境配置时相关错误整合解决方案: 根据文档配置: https://github.com/ ...
【Unity游戏开发】Android中如何集成Unity3D项目——入门级踩坑
最近的学习之路真的是波折,先是想学Kotlin,结果赶上了算法比赛,恶补了几天算法,然后回归Kotlin,这周又需要调研一下Unity3D,需要把Unity项目嵌入到我们的Android项目中. 今天 ...

web项目国产化踩坑

web项目国产化踩坑

1.原生的input type="file"不支持accept属性限制选择文件类型

web项目国产化踩坑相关推荐

最新文章

热门文章