使用时限制文件格式？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

#1楼

如前面的答案中所述，我们不能限制用户仅选择给定文件格式的文件。但是使用html中的file属性上的accept标签确实很方便。

至于验证，我们必须在服务器端进行。我们也可以在js的客户端执行此操作，但这不是万无一失的解决方案。我们必须在服务器端进行验证。

对于这些需求，我确实更喜欢struts2 Java Web应用程序开发框架。借助其内置的文件上传功能，将文件上传到基于struts2的Web应用程序简直是小菜一碟。只需提及我们希望在应用程序中接受的文件格式，其余所有内容都由框架本身的核心负责。您可以在struts官方站点上进行检查。

#2楼

严格来说，答案是否定的 。开发人员无法阻止用户在本机OS文件选择对话框中选择任何类型或扩展名的文件。

但是， <input type = "file">的accept属性仍然可以帮助在OS的文件选择对话框中提供过滤器。例如，

<!-- (IE 10+, Edge, Chrome, Firefox 42+) --> <input type="file" accept=".xls,.xlsx" />

应该提供一种过滤掉.xls或.xlsx以外的文件的方法。尽管input元素的MDN页面总是说支持此功能，但令我惊讶的是，直到42版，此功能才在Firefox中对我不起作用。该功能在IE 10 +，Edge和Chrome中有效。

因此，为了支持IE 42+以上版本的Firefox以及IE 10 +，Edge，Chrome和Opera，我认为最好使用逗号分隔的MIME类型列表：

<!-- (IE 10+, Edge, Chrome, Firefox) --> <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />

[ 边缘行为：文件类型过滤器下拉列表显示此处提到的文件类型，但不是下拉列表中的默认文件类型。默认过滤器是“ All files (*) 。]

您还可以在MIME类型中使用星号。例如：

<input type="file" accept="image/*" /> <!-- all image types --> <input type="file" accept="audio/*" /> <!-- all audio types --> <input type="file" accept="video/*" /> <!-- all video types -->

W3C 建议作者在accept属性中同时指定MIME类型和相应的扩展名。因此， 最好的方法是：

<!-- Right approach: Use both file extensions and corresponding MIME-types. --> <!-- (IE 10+, Edge, Chrome, Firefox) --> <input type="file" accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />

JSFiddle相同：这里。

参考： MIME类型列表

重要说明：使用accept属性仅提供一种过滤感兴趣类型的文件的方法。浏览器仍然允许用户选择任何类型的文件。应该进行额外的（客户端）检查（使用JavaScript，一种方法是this ），并且绝对必须在服务器上验证文件类型，同时使用同时使用文件扩展名及其二进制签名（ ASP）的MIME类型.NET ， PHP ， Ruby ， Java ）。您可能还希望参考这些表以获取文件类型及其魔术数字，以执行更可靠的服务器端验证。

这里有3个良好的读取上的文件上传和安全性。

编辑：也许还可以使用HTML5 File API在客户端使用JavaScript（而不只是通过查看扩展名）来使用其二进制签名进行文件类型验证，但是仍然必须在服务器上对文件进行验证，因为恶意用户仍然可以通过发出自定义HTTP请求来上传文件。

#3楼

我知道这有点晚了。

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

#4楼

使用带有accept属性的input标签

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

单击此处以获取最新的浏览器兼容性表

现场演示在这里

要仅选择图像文件，可以使用此accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

现场演示在这里

仅会显示gif，jpg和png，Chrome 44版的屏幕截图

#5楼

是的，你是对的。 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>

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3153193

标签

opera

ruby

XLSX

ASP.NET

Apache Struts

使用时限制文件格式 <input type=“file”> ？

#1楼

#2楼

#3楼

#4楼

#5楼