我想限制可以从本机操作系统文件选择器中选择的文件类型,当用户单击HTML中的<input type="file">元素中的Browse按钮时。我感觉这是不可能的,但我想知道是否有解决办法。我希望只使用HTML和JavaScript;请不要用闪光灯。
当前回答
我的建议如下:
If you have to make user select any of image files by default, the use accept="image/*" <input type="file" accept="image/*" /> if you want to restrict to specific image types then use accept="image/bmp, image/jpeg, image/png" <input type="file" accept="image/bmp, image/jpeg, image/png" /> if you want to restrict to specific types then use accept=".bmp, .doc, .pdf" <input type="file" accept=".bmp, .doc, .pdf" /> You cannot restrict user to change file filer to all files, so always validate file type in script and server
其他回答
我知道有点晚了。
function Validatebodypanelbumper(theForm)
{
var regexp;
var extension = theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
if ((extension.toLowerCase() != ".gif") &&
(extension.toLowerCase() != ".jpg") &&
(extension != ""))
{
alert("The \"FileUpload\" field contains an unapproved filename.");
theForm.FileUpload1.focus();
return false;
}
return true;
}
是的,你说得对。这在HTML中是不可能的。用户将能够选择任何他/她想要的文件。
您可以编写一段JavaScript代码来避免根据扩展名提交文件。但请记住,这绝不能阻止恶意用户提交他/她真正想要的任何文件。
喜欢的东西:
function beforeSubmit()
{
var fname = document.getElementById("ifile").value;
// check if fname has the desired extension
if (fname hasDesiredExtension) {
return true;
} else {
return false;
}
}
HTML代码:
<form method="post" onsubmit="return beforeSubmit();">
<input type="file" id="ifile" name="ifile"/>
</form>
我的建议如下:
If you have to make user select any of image files by default, the use accept="image/*" <input type="file" accept="image/*" /> if you want to restrict to specific image types then use accept="image/bmp, image/jpeg, image/png" <input type="file" accept="image/bmp, image/jpeg, image/png" /> if you want to restrict to specific types then use accept=".bmp, .doc, .pdf" <input type="file" accept=".bmp, .doc, .pdf" /> You cannot restrict user to change file filer to all files, so always validate file type in script and server
您可以在文件选择框中使用“accept”属性作为过滤器。 使用“accept”可以帮助您根据“后缀”或“MIME类型”过滤输入文件
1.基于后缀的过滤: 这里的“accept”属性只允许选择扩展名为。jpeg的文件。
<input type="file" accept=".jpeg" />
2.基于“文件类型”的过滤器 这里的“accept”属性只允许你选择一个“image/jpeg”类型的文件。
<input type="file" accept="image/jpeg" />
重要提示:我们可以更改或删除文件的扩展名,而不改变模因类型。例如,可以有一个没有扩展名的文件,但该文件的类型可以是“image/jpeg”。所以这个文件不能通过accept=".jpeg"过滤器。但是它可以传递accept="image/jpeg"。
3.我们可以使用*来选择各种文件类型。例如下面的代码允许选择所有类型的图像。例如"image/png"或"image/jpeg"或... .所有这些都是允许的。
<input type="file" accept="image/*" />
4.我们可以在select属性中使用cama(,)作为“或操作符”。例如,允许所有类型的图像或pdf文件,我们可以使用以下代码:
<input type="file" accept="image/* , application/pdf" />
输入标记有accept属性。然而,它在任何方面都不可靠。 浏览器很可能将其视为“建议”,这意味着用户将根据文件管理器的不同,有一个只显示所需类型的预选。他们仍然可以选择“所有文件”,上传任何他们想要的文件。
例如:
<form> <输入类型=“文件” 名称=“图片” id=“图片” 接受=“图像/gif, 图像/jpeg” /> </form>
在HTML5规范中阅读更多
请记住,它只是用于“帮助”用户找到正确的文件。 每个用户都可以向您的服务器发送任何请求。 您总是需要验证服务器端的所有内容。
所以答案是:不,你不能限制,但你可以设置一个预选,但你不能依赖它。
Alternatively or additionally you can do something similar by checking the filename (value of the input field) with JavaScript, but this is nonsense because it provides no protection and also does not ease the selection for the user. It only potentially tricks a webmaster into thinking he/she is protected and opens a security hole. It can be a pain in the ass for users that have alternative file extensions (for example jpeg instead of jpg), uppercase, or no file extensions whatsoever (as is common on Linux systems).
推荐文章
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- 不可变与可变类型
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 如何将文件指针(file * fp)转换为文件描述符(int fd)?
- 点击下载Href图片链接
- 字符串不能识别为有效的日期时间“格式dd/MM/yyyy”
- HtmlSpecialChars在JavaScript中等价于什么?
- 我如何删除背景图像在css?
- 如何克服HTML表单嵌套的限制?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 使用域集图例引导
- 音频停止功能
- 如何禁用谷歌翻译从HTML在Chrome