首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在使用<input type =“file”>时限制文件格式?

如何在使用<input type =“file”>时限制文件格式?

提问于 2017-12-26 03:44:29
回答 2关注 0查看 893

当用户单击<input type="file">HTML 中元素的浏览按钮时,我想限制可以从本地OS文件选择器中选择的文件的类型。我有一种感觉,这是不可能的,但我想知道是否有是一个解决方案。我想只保留HTML和JavaScript; 没有Flash。

回答 2

MyLove

发布于 2017-12-26 03:52:38

你可以使用该change事件来监视用户选择的内容,并通知他们该文件不可接受。它不限制显示的文件的实际列表,但它是最接近你可以做客户端,除了支持不佳的accept属性。

代码语言:txt
AI代码解释
复制
var file = document.getElementById('someId');

代码语言:txt
AI代码解释
复制
file.onchange = function(e){
代码语言:txt
AI代码解释
复制
    var ext = this.value.match(/\.([^\.]+)$/)[1];
代码语言:txt
AI代码解释
复制
    switch(ext)
代码语言:txt
AI代码解释
复制
    {
代码语言:txt
AI代码解释
复制
        case 'jpg':
代码语言:txt
AI代码解释
复制
        case 'bmp':
代码语言:txt
AI代码解释
复制
        case 'png':
代码语言:txt
AI代码解释
复制
        case 'tif':
代码语言:txt
AI代码解释
复制
            alert('allowed');
代码语言:txt
AI代码解释
复制
            break;
代码语言:txt
AI代码解释
复制
        default:
代码语言:txt
AI代码解释
复制
            alert('not allowed');
代码语言:txt
AI代码解释
复制
            this.value='';
代码语言:txt
AI代码解释
复制
    }
代码语言:txt
AI代码解释
复制
};

最爱开车啦

发布于 2017-12-26 03:52:15

输入标签有accept属性。但是,这是不可靠的。浏览器很可能将其视为“建议”,这意味着用户也将根据文件管理器进行预选,只显示所需的类型。他们仍然可以选择“所有文件”并上传他们想要的任何文件。

例:

代码语言:txt
AI代码解释
复制
<form>
代码语言:txt
AI代码解释
复制
  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
代码语言:txt
AI代码解释
复制
</form>
和开发者交流更多问题细节吧,去 写回答
相关文章
input file accept限制文件上传类型
上传文件只允许上传doc、docx、jpg、png、gif和pdf格式的文件,需要在前后端进行双重限制
全栈程序员站长
2022/09/09
6.5K0
input type= file通过ajax 来异步上传
input类型设为file: <label for="img_input"></label> <input id="img_input" type="file"/>
山河木马
2019/03/05
1.6K0
微信端input type=file 无法上传图片
<input id="photo" type="file" accept="image/jpeg, image/x-png, image/gif" capture="camera">
山河木马
2019/03/05
5.6K2
input+type=file同时支持文件和文件夹
使用的dropzone库,你可以将任意类型的文件拖拽进去上传,如果是目录,则会获取目录内的文件
阿超
2023/06/23
3410
FF下修改美化文件域(input type=file)的样式
该文介绍了如何修改美化文件域(input type=file)在FF下的样式。首先,定义了样式,让文件域看起来更美观。然后,在<form>标签中添加一个input type=file,并设置其class为file。最后,在<style>标签内定义了input的样式。
练小习
2017/12/29
1.2K0
input file 美化
        <input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化。找了很多资料,目前发现以下方式是最简单的美化方式。
用户2038589
2018/09/06
1.5K0
vue中使用input file上传文件
刚刚学习前端的时候还是觉得这个东西好难的样子,后来第一家公司由于没有这个需求就没用过,现在这家公司由于要求很完美的组件,我就是用的vue组件vue-image-crop-upload(适用于pc端的比较好的组件),先在这里记录用法下次再去把vue-images-crop-upload这个组件记录下
全栈程序员站长
2022/09/09
1.2K0
让 Android 的 WebView 支持 type 为 file 的 input,同时支持拍照
Android 的 WebView 组件默认是不启用 type 为 file 的 input 的,需要在代码中做一些类似 hack 的编码(因为解决问题的目标对象的方法都是加了@hide注解的)才能召唤神龙。
LeoXu
2018/08/15
1.8K0
input type="file"属性详解,利用capture调用手机摄像头
Value:DOMString 选择文件的路径。DOMString 是UTF-16字符串。由于JavaScript已经使用了这样的字符串,所以DOMString 直接映射到 String。
德顺
2019/11/13
11.8K0
input type="file"属性详解,利用capture调用手机摄像头
input file样式设置
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/160952.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/16
2.1K0
input file样式设置
salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件
在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取。salesforce 零基础学习(二十四)解析csv格式内容中有类似的使用此标签进行解析附件内容,后台只要声明String类型变量用来存储附件名称,Blob类型变量用来存储附件的内容即可。
Zero-Zhang
2018/10/08
1.5K0
salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件
input file读取文件
主要使用readAsDataURL去完成转换base64,如果是文档,也可以用readAsText(file,encoding)去读取。
全栈程序员站长
2022/09/09
2.5K0
input file多选 multiple[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/160959.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/09
2.6K0
input = file 实现上传文件
使用input = file实现文件上传功能, 如果点击提交按钮,提交表单并上传选中的文件:
全栈程序员站长
2022/09/13
7.3K0
input = file 实现上传文件
input file获取文件路径
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/160948.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/16
7.2K0
如何限制input输入类型
1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/1/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/2/g,''))"><br/> <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData(
小柒2012
2018/04/13
2.5K0
移除HTML5 input在type="number"时的上下小箭头
将type="number"改为type="tel",同样是数字键盘,但是没有箭头,但是这样会有一个问题无法设置input的 max和min 值了,当还有step,当然如果你想用这种方案的话可以利用input的 pattern 属性来正则加验证。
李维亮
2021/07/09
1.9K0
input file 修改按钮名称[通俗易懂]
2、然后加上一个文本input(type=”text”)和一个按钮input(type=”button”)
全栈程序员站长
2022/09/14
3.4K0
js web上传文件夹,访问文件夹的多有文件 input type=file
运行input上传文件夹需要设置 两个重要属性 webkitdirectory multiple
拿我格子衫来
2022/01/24
5.8K0
js web上传文件夹,访问文件夹的多有文件 input type=file
bootstrap file input 官方文档翻译
file Input官方文档 中文翻译 file input 特性 1、这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js的浏览器。 2、fileinput 插件包括options,templates等三个部分来控制展示   。文件标题部分:用来展示选中的文件的简介信息   。文件按钮行为部分:用来浏览,移除和上传文件   。文件预览部分:用来将展示选中的文件到客户端实现预览(支持图片, 文档, flash, 和视频类型),别的文
windseek
2018/05/15
2.2K0

相似问题

Could not open input file: artisan?

1704

<input type="file"> 加载文件的速度是否与文件大小有关?

1186

挂载后,提示no input file specified?

1299

PHP错误 No input file specified - 求解决?

0101

angular8 如何通过按钮来增加<input type='text'>?

0486
相关问答用户
某公司 | 程序员擅长1个领域
腾讯云TDP | 先锋会员擅长2个领域
腾讯云TDP | 产品KOL擅长5个领域
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档