我想限制可以从本机操作系统文件选择器中选择的文件类型,当用户单击HTML中的<input type="file">元素中的Browse按钮时。我感觉这是不可能的,但我想知道是否有解决办法。我希望只使用HTML和JavaScript;请不要用闪光灯。


当前回答

我知道有点晚了。

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;
}

其他回答

从技术上讲,您可以在input元素上指定accept属性(html5中的另一种选择),但它不受适当支持。

您可以使用更改事件监视用户选择的内容,并在此时通知他们该文件不可接受。它没有限制实际显示的文件列表,但是除了不受支持的accept属性之外,它是最接近客户端的。

var file = document.getElementById('someId'); 文件。Onchange =函数(e) { Var ext = this.value.match(/\.([^\.]+)$/)[1]; Switch (ext) { 例“jpg”: 例“bmp”: 例“png”: 气管无名动脉瘘管的情况下“”: 警报(允许的); 打破; 默认值: 警报(“不允许”); 这一点。Value = "; } }; <input type="file" id="someId" />

JSFiddle

正如在前面的回答中提到的,我们不能限制用户仅为给定的文件格式选择文件。但是在html中的file属性上使用accept标记非常方便。

至于验证,我们必须在服务器端进行。我们也可以在js的客户端这样做,但这不是一个万无一失的解决方案。我们必须在服务器端进行验证。

对于这些需求,我真的更喜欢struts2 Java web应用程序开发框架。通过其内置的文件上传功能,将文件上传到基于struts2的web应用程序中是小菜一碟。只要提到我们希望在应用程序中接受的文件格式,其余的都由框架本身的核心处理。您可以在struts的官方网站上查看它。

我知道有点晚了。

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;
}

您可以在文件选择框中使用“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" />