如何在 FileUpload 控件中限制文件类型

Posted 2023-03-15

【中文标题】如何在 FileUpload 控件中限制文件类型

【英文标题】：How to restrict file type in FileUpload control

【发布时间】：2011-02-16 08:03:02

【问题描述】：

是否可以允许文件上传控件只显示图像？

当我们点击浏览按钮时，它应该只显示图像。

【问题讨论】：

表演是什么意思？你是说上传吗？

@Amgdy - "show" = 仅在单击“浏览”按钮时弹出的实际文件对话框浏览器中显示特定类型的文件。

【参考方案1】：

不，在 web 中你不能从客户端，显然从服务器端你可以做一些令人惊奇的事情。 对于这种东西，程序员一般使用Activex、flash之类的。

【讨论】：

新的网络浏览器支持输入接受属性，所以你可以这样做：accept=".png,.jpg,.jpeg,.gif"

那行不通。在 Chrome 中，它似乎将文件选择器限制为图像类型，但您可以将下拉列表更改为（所有文件 .）并上传非图像文件。

【参考方案2】：

假设您的意思是只上传图片。

您可以检查文件的ContentType 属性（即图像/gif）。

看看这里的例子：https://web.archive.org/web/20100306030822/http://www.15seconds.com/issue/061116.htm

【讨论】：

链接已于 2019 年 11 月失效

【参考方案3】：

使用普通的<input type="file">，恐怕在客户端是不可能的。

但是，某些第 3 方上传器（例如 SWFUpload）提供此功能。

【参考方案4】：

我没有找到直接解决这个问题的方法。

这是我使用 RegularExpressionValidator 的解决方法：

<asp:FileUpload ID="fuImportImage" runat="server" />
<asp:RegularExpressionValidator ID="regexValidator" runat="server"
     ControlToValidate="fuImportImage"
     ErrorMessage="Only JPEG images are allowed" 
     ValidationExpression="(.*\.([Jj][Pp][Gg])|.*\.([Jj][Pp][Ee][Gg])$)">
</asp:RegularExpressionValidator>

【参考方案5】：

你不能严格限制文件类型，但如果浏览器支持它，你可以让它最初只显示某种类型的文件：

<form method="post" action="blahblah.blah">
  <input type="file" name="image" id="image" accept="image/png, image/jpeg" />
</form>

【参考方案6】：

//VALIDATE FILE EXTENTION
var _validFileFlag;
function fValidFileExt(vfilePath)
  var vFileName=vfilePath.split('\\').pop();
  var vFileExt=vfileName.split('.').pop();
  if(vFileExt.toUpperCase()=="JPEG" || vFileExt.toUpperCase()=="JPG")
     _validFileFlag = true;
   
  _validFileFlag = false;
 

<asp:FileUpload ID="FileUpload1" onchange="fValidFileExt(this.value);" runat="server"  />

在保存数据/上传时检查“_validFileFlag”..

【参考方案7】：

在 2015 年，网络浏览器支持输入 accept 属性，因此您可以这样做：

<asp:FileUpload ID="fileUploader" runat="server" accept=".png,.jpg,.jpeg,.gif" />

但请记住，Visual Studio 可能会向您显示一条消息，说明这是 FileUpload ASP 工具的无效属性。

【讨论】：

这仍然允许用户上传不使用这些扩展名之一的文件

@jtate 问题仅限于显示图像。您应该始终在服务器端验证上传（和任何用户输入），以捕捉有人试图上传不需要的东西。用户可以简单地将不需要的文件的扩展名重命名为接受列表中的内容。因此，您应该将文件上传中的接受列表作为对用户的简单帮助，并至少在后端进行验证。

这是一个非常好的解决方案。只是在这里更新它对 Microsoft Edge 浏览器没有任何影响。否则它可以在 IE10/11、Firefox、Chrome 和 Safari 上运行。谢谢！

【参考方案8】：

使用 accept 属性在文件浏览器中只显示图像，如下所示 -

<asp:FileUpload ID="FileUploadFileType" runat="server" CssClass="form-control" accept=".png,.jpg,.jpeg,.gif" />

使用 asp.nets RegularExpressionValidator 使用验证消息验证所选文件类型。

<asp:RegularExpressionValidator ID="RegExValFileUploadFileType" runat="server"
                        ControlToValidate="FileUploadFileType"
                        ErrorMessage="Only .jpg,.png,.jpeg,.gif Files are allowed" Font-Bold="True"
                        Font-Size="Medium"
                        ValidationExpression="(.*?)\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$"></asp:RegularExpressionValidator>