将文件字段添加到表单时,您可能希望将选择器限制为图像
当然,您可以添加服务器端筛选器,但是拥有客户端筛选器对于您的用户来说是一个很好的UX-不会浪费时间,也不会浪费资源来向您发送文件并返回错误。
您可以使用accept
属性,并指定您接受的文件的MIME类型。
image/*
应该捕获所有图像。
<input type="file" name="myImage" accept="image/*" />
如果只想允许某些特定的文件类型,请列出它们:
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
您可以在此处检查浏览器对此属性的支持:https://caniuse.com/#feat=input-file-accept
免费下载我的JavaScript初学者手册
更多浏览器教程:
- HTML5提供了一些有用的技巧
- 我如何使基于CMS的网站脱机工作
- 渐进式Web应用程序完整指南
- 提取API
- 推送API指南
- 频道消息传递API
- 服务人员教程
- 缓存API指南
- 通知API指南
- 深入IndexedDB
- Selectors API:querySelector和querySelectorAll
- 通过延迟和异步有效地加载JavaScript
- 文档对象模型(DOM)
- Web存储API:本地存储和会话存储
- 了解HTTP Cookies的工作原理
- 历史API
- WebP图像格式
- XMLHttpRequest(XHR)
- 深入的SVG教程
- 什么是数据网址
- 学习网络平台的路线图
- CORS,跨域资源共享
- 网络工作者
- requestAnimationFrame()指南
- 什么是Doctype
- 使用DevTools控制台和控制台API
- 语音合成API
- 如何在纯JavaScript中等待DOM ready事件
- 如何将类添加到DOM元素
- 如何遍历来自querySelectorAll的DOM元素
- 如何从DOM元素中删除类
- 如何检查DOM元素是否具有类
- 如何更改DOM节点值
- 如何将click事件添加到从querySelectorAll返回的DOM元素列表中
- WebRTC,实时Web API
- 如何在JavaScript中获取元素的滚动位置
- 如何替换DOM元素
- 如何只接受输入文件字段中的图像
- 为什么要使用浏览器的预览版?
- Blob对象
- 文件对象
- FileReader对象
- FileList对象
- ArrayBuffer
- ArrayBufferView
- URL对象
- 类型数组
- DataView对象
- BroadcastChannel API
- Streams API
- FormData对象
- 导航器对象
- 如何使用地理位置API
- 如何使用getUserMedia()
- 如何使用拖放API
- 如何在网页上滚动
- 在JavaScript中处理表单
- 键盘事件
- 鼠标事件
- 触摸事件
- 如何从DOM元素中删除所有子级
- 如何使用原始Javascript创建HTML属性
- 如何检查是否使用JavaScript选中了复选框?
- 如何使用JavaScript复制到剪贴板
- 如何使用JavaScript禁用按钮
- 如何在浏览器中使页面可编辑
- 如何使用URLSearchParams在JavaScript中获取查询字符串值
- 如何一次删除页面上的所有CSS
- 如何使用insertAdjacentHTML
- Safari,退出前警告
- 如何使用JavaScript将图像添加到DOM
- 如何重设表格
- 如何使用Google字体