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

9 回答

• 8

  从技术上讲，您可以在 input 元素上指定accept attribute（html5中的替代项），但它不受支持 .

  回复于 2024-05-01T10:46:52+08:00
• 78

  你实际上可以用javascript来做但是记住js是客户端，所以你实际上是“警告用户”他们可以上传什么类型的文件，如果你想要避免（限制或限制你说）某些类型的文件你必须做服务器端 .

  如果您想开始使用服务器端验证，请查看this basic tut . 有关整个教程，请访问this page .

  祝好运！

  回复于 2024-05-01T10:46:52+08:00
• 5

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

  var file = document.getElementById('someId');
  
  file.onchange = function(e){
      var ext = this.value.match(/\.([^\.]+)$/)[1];
      switch(ext)
      {
          case 'jpg':
          case 'bmp':
          case 'png':
          case 'tif':
              alert('allowed');
              break;
          default:
              alert('not allowed');
              this.value='';
      }
  };
  

  http://www.jsfiddle.net/gaby/7br93/1/的示例

  回复于 2024-05-01T10:46:52+08:00
• 796

  我知道这有点晚了 .

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

  回复于 2024-05-01T10:46:52+08:00
• 2

  输入标记有accept属性 . 但是，它在任何方面都不可靠 . 浏览器最有可能将其视为“建议”，这意味着用户将根据文件管理器进行预选，仅显示所需类型 . 他们仍然可以选择“所有文件”并上传他们想要的任何文件 .

  例：

  <form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
  </form>
  

  阅读更多html5 spec

  请记住，它只是用作“帮助”，以便用户找到正确的文件 . 每个用户都可以向服务器发送他/她想要的任何请求 . 你总是需要验证服务器端的所有内容 .

  所以答案是： no 你不能限制，但你可以设置预选但你不能依赖它 .

  或者或另外，您可以通过使用JavaScript检查文件名（输入字段的值）来执行类似的操作，但这是无稽之谈，因为它不提供保护，也不会简化用户的选择 . 它只会欺骗网站管理员认为他/她受到保护并打开安全漏洞 . 对于具有替代文件扩展名（例如jpeg而不是jpg），大写或没有任何文件扩展名的用户来说，这可能是一种痛苦（在Linux系统中很常见） .

  回复于 2024-05-01T10:46:52+08:00
• 181

  是的，你是对的 . 使用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>
  

  回复于 2024-05-01T10:46:52+08:00
• 7

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

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

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

  应该提供一种过滤除.xls或.xlsx以外的文件的方法 . 虽然_346223_元素的MDN页面始终表示支持这一点，但令我惊讶的是，这在Firefox版本42中对我不起作用 . 这适用于IE 10，Edge和Chrome .

  因此，为了支持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" />
  

  [ Edge behavior：文件类型过滤器下拉列表显示此处提到的文件类型，但不是下拉列表中的默认值 . 默认筛选器是 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 recommends 作者在 accept 属性中指定MIME类型和相应的扩展名 . 所以， best 方法是：

  <!-- 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相同：here .

  Reference: List of MIME-types

  IMPORTANT: 使用accept属性只提供了一种过滤掉不感兴趣的类型文件的方法 . 浏览器仍然允许用户选择任何类型的文件 . 应该使用文件扩展名及其二进制签名（ASP.NET，PHP，Ruby，使用MIME类型的组合，使用JavaScript，一种方式是this）进行额外的（客户端）检查 . Java） . 您可能还需要为文件类型及其magic numbers引用these tables，以执行更强大的服务器端验证 .

  以下是关于文件上传和安全性的three good reads .

  EDIT: 可能使用其二进制签名进行文件类型验证也可以使用HTML（而不是仅通过查看扩展名）在客户端使用HTML5文件API完成，但仍然必须在服务器上验证该文件，因为恶意用户仍然可以通过发出自定义HTTP请求来上传文件 .

  回复于 2024-05-01T10:46:52+08:00
• 18

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

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

  对于这些要求，我更喜欢struts2 Java Web应用程序开发框架 . 凭借其内置的文件上传功能，将文件上传到基于struts2的Web应用程序是一件小事 . 只需提及我们希望在我们的应用程序中接受的文件格式，其余所有内容都由框架本身的核心处理 . 你可以在struts官方网站上查看 .

  回复于 2024-05-01T10:46:52+08:00
• 45

  将 input 标记与 accept 属性一起使用

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

  点击here for the latest browser compatibility table

  现场演示here

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

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

  现场演示here

  
  只显示gif，jpg和png，从Chrome 44版屏幕抓取

  回复于 2024-05-01T10:46:52+08:00