如何在文件上传控件中限制文件类型

Question

是否可以让文件上传控件仅显示图像文件？

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

- Geeth

---

你所说的“show”是什么意思？你是指上传吗？ - Ahmed Magdy

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

Answer 1

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

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

请记住，Visual Studio可能会向您显示有关此文件上传ASP工具的无效属性的消息。

- Tonko Boekhoud

---

这仍然允许用户上传不使用这些扩展名的文件。 - jtate

这个问题仅限于“展示”图片。您应该始终在服务器端验证上传（以及任何用户输入），以捕获试图上传不需要的文件的人。用户可以将不需要的文件重命名为接受列表中的某个文件类型。因此，您应该将接受列表视为对用户的简单帮助，并至少在后端进行验证。 - Tonko Boekhoud

这是一个非常好的解决方案。只是更新一下，在Microsoft Edge浏览器中没有任何效果，但在IE10/11、Firefox、Chrome和Safari上可以正常工作。谢谢！ - kaushalparik27

Answer 2

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

以下是我的解决方案，使用了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>

- Christoph Brückmann

Answer 3

您无法严格限制文件类型，但如果浏览器支持，您可以使其最初仅显示某种类型的文件：

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

- iconoclast

Answer 4

不，你不能在Web客户端上实现这个功能，但从服务器端可以做出惊人的事情。 对于这种情况，程序员通常使用Activex、Flash或类似的技术。

- netadictos

---

新的网络浏览器支持输入属性“accept”，因此您可以这样做：accept=".png,.jpg,.jpeg,.gif"。 - Learning

那不起作用。在Chrome中，它似乎限制了文件选择器的图像类型，但您可以更改下拉菜单以选择（所有文件*.*），并上传非图像文件。 - Norbert Norbertson

Answer 5

//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"。

- Somnath R

Answer 6

假设您只是上传图片。

您可以检查文件的ContentType属性（例如image/gif）。

这里有一个示例，请参见：https://web.archive.org/web/20100306030822/http://www.15seconds.com/issue/061116.htm。

- David Neale

---

链接已于2019年11月失效。 - t.durden

Answer 7

使用accept属性可以在文件浏览器中仅显示像下面这样的图像 -

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

使用ASP.NET的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>

- Ravindra Vairagi

Answer 8

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

然而，一些第三方上传器，如SWFUpload提供了这个功能。

- Gant