当用户单击<input type="file">HTML 中元素的浏览按钮时,我想限制可以从本地OS文件选择器中选择的文件的类型。我有一种感觉,这是不可能的,但我想知道是否有是一个解决方案。我想只保留HTML和JavaScript; 没有Flash。
你可以使用该change事件来监视用户选择的内容,并通知他们该文件不可接受。它不限制显示的文件的实际列表,但它是最接近你可以做客户端,除了支持不佳的accept属性。
var file = document.getElementById('someId');
file.onchange = function(e){
var ext = this.value.match(/\.([^\.]+)$/)[1];
switch(ext)
{
case 'jpg':
case 'bmp':
case 'png':
case 'tif':
alert('allowed');
break;
default:
alert('not allowed');
this.value='';
}
};
输入标签有accept属性。但是,这是不可靠的。浏览器很可能将其视为“建议”,这意味着用户也将根据文件管理器进行预选,只显示所需的类型。他们仍然可以选择“所有文件”并上传他们想要的任何文件。
例:
<form>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>