具有有限文件类型的HTML文件输入字段?

时间:2009-08-06 19:38:23

标签: html file upload

如果我有一个HTML文件输入字段,是否有任何方法可以限制它只允许图像上传?我确信这可以用Flash或Java实现,但我暂时试图远离它们。

我在网上找到了“接受”属性,但它似乎没有为我做任何事情(或者我使用它错了。)。任何帮助或示例表示赞赏。

7 个答案:

答案 0 :(得分:5)

最好的方法是在后端处理它。根据您要允许的类型类型和后端技术,您可以找到各种方法。

您也可以在javascript中执行此操作,但是您会受到更多限制,并且可能会导致问题跨浏览器:

if((document.form1.upload.value.lastIndexOf(".jpg")==-1) {
   alert("Please upload only .jpg extention file");
   return false;
}

via

如果您使用jquery,请查看此问题:How to have jQuery restrict file types on upload?

您还可以使用JQuery Validation插件。

$("#myform").validate({
  rules: {
    field: {
      required: true,
      accept: "xls|csv"
    }
  }
});

via

答案 1 :(得分:1)

根据this answer(引用):

  

接受属性是在。中引入的   RFC 1867,打算启用   基于MIME类型的文件类型过滤   用于文件选择控件。但最,   如果不是全部,浏览器不使用   这个属性。

我猜你仍然要处理服务器上脚本中的“错误”文件...即使你找到了一些Javascript检查方式(可能有 - 看其他答案),你将始终必须检查服务器上的数据,因为JS可以被禁用,并且表单发布伪造...

答案 2 :(得分:0)

无法限制x-browser的类型。

答案 3 :(得分:0)

使用javascript,您可以通过检查文件名文本框中的更改内容或可能使用的提交按钮来执行此操作。

这个网站有一个这样做的例子: http://www.codestore.net/store.nsf/unid/DOMM-4Q8H9E

如果你真的很谨慎,虽然你也应该在后端验证,因为我可以在任何文件的末尾添加一个.jpg,它会通过javascript检查。

答案 4 :(得分:0)

嗯,你可以使用Javascript来实现,实际上如果你使用的是jQuery,几乎所有文件上传插件都可以选择处理文件类型限制。 只有HTML不会这样做。

但只有客户端过滤并不意味着任何类型的文件都无法上传到您的服务器。实际上攻击者可以上传任何类型的文件,因为它很容易避免Javascript'盾'。您必须始终执行服务器端验证。

答案 5 :(得分:0)

不幸的是,似乎没有任何合适的方法来做到这一点。限制标记中文件类型的好处是浏览器将过滤掉无用的文件。今天没有办法实现这一目标。 :(

答案 6 :(得分:0)

如果您使用的是jQuery,请查看此插件 - https://github.com/ajaxray/bootstrap-file-field

使用这个小插件,您可以使用简单的数据属性或JS设置设置各种限制,包括文件类型 e,g,data-file-types="image/jpeg,image/png"将限制选择除jpg和png图像之外的文件类型 BTW,将文件输入字段显示为引导按钮,并将精美地显示所选文件名(或选择错误)。