HTML表单上传中的过滤器扩展[重复]

Posted 2023-02-15

【中文标题】HTML表单上传中的过滤器扩展[重复]

【英文标题】：Filter Extensions in HTML form upload [duplicate]

【发布时间】：2010-09-20 05:32:26

【问题描述】：

我有一个简单的 html 上传表单，我想指定一个默认扩展名（例如“*.drp”）。我已经读过这样做的方法是通过输入标签的 ACCEPT 属性，但我不知道具体如何。

<form enctype="multipart/form-data" action="uploader.php" method="POST">
Upload DRP File:
<input name="Upload Saved Replay" type="file" accept="*.drp"/><br />
<input type="submit" value="Upload File" />
</form>

编辑 我知道可以使用 javascript 进行验证，但我希望用户只在他的弹出对话框中看到“.drp”文件。另外，我不太关心这个应用程序中的服务器端验证。

【参考方案1】：

accept 属性需要 MIME 类型，而不是文件掩码。例如，要接受 PNG 图像，您需要 accept="image/png"。您可能需要找出浏览器认为您的文件类型是什么 MIME 类型，并相应地使用它。但是，由于“drp”文件并不标准，您可能必须接受通用 MIME 类型。

此外，似乎大多数浏览器可能不支持此属性。

过滤文件上传的更好方法是在服务器端。这很不方便，因为偶尔的用户可能会浪费时间上传文件，只是为了知道他们选择了错误的文件，但至少你会有某种形式的数据完整性。

或者，您可以选择在提交表单之前使用 JavaScript 进行快速检查。只需检查文件字段值的扩展名，看看它是否为“.drp”。这可能会比接受属性更受支持。

【讨论】：

有用的提示：这整个线程是十年前最好的部分。不完全是关于最受支持和最不支持的最新信息。

等等，我的评论呢？你是怎么把它删除的？

不幸的是，截至 2015 年 12 月，这一切似乎都是最新的。该属性仍然没有得到很好的支持。我给它提供了十几种 MIME 字体内容类型，它唯一识别的是 .woff。无法识别 TTF 和其他字体类型。对于文件选择器来说，尽管 MIME 类型比文件扩展名更合适，这实际上是愚蠢的。 MIME 类型没用，因为文件选择器按文件扩展名过滤，而不是 MIME 类型，它无法验证 MIME 类型，甚至无法识别我提供的类型的 1/10。多么遗憾的状态。

【参考方案2】：

accept 属性指定表单目标将正确处理的内容类型（MIME 类型）的逗号分隔列表。不幸的是，所有主要浏览器都忽略了此属性，因此它不会以任何方式影响浏览器的文件对话框。

【讨论】：

accept=.csv 为我工作............

【参考方案3】：

您可以使用 javascript 来实现。在提交函数中获取表单字段的值，解析出扩展。

你可以这样开始：

<form name="someform"enctype="multipart/form-data" action="uploader.php" method="POST">
<input type=file name="file1" />
<input type=button onclick="val()" value="xxxx" />
</form>
<script>
function val() 
    alert(document.someform.file1.value)

</script>

我同意 alexmac - 在服务器端也这样做。

【讨论】：

为什么使用onclick而不是onchange？

【参考方案4】：

我不会使用这个属性，因为大多数浏览器都会忽略它，正如 CMS 指出的那样。

无论如何都要使用客户端验证，但只能与服务器端结合使用。任何客户端验证都可以进行。

有点偏离主题，但有些人会检查内容类型以验证上传的文件。您需要注意这一点，因为攻击者可以轻松更改它并上传例如 php 文件。参见示例：http://www.scanit.be/uploads/php-file-upload.pdf

【讨论】：

这只是一个可用性问题。

【参考方案5】：

我使用 javascript 检查文件扩展名。这是我的代码：

HTML

<input name="fileToUpload" type="file" onchange="check_file()" >

.. ..

javascript

function check_file()
                str=document.getElementById('fileToUpload').value.toUpperCase();
        suffix=".JPG";
        suffix2=".JPEG";
        if(str.indexOf(suffix, str.length - suffix.length) == -1||
                       str.indexOf(suffix2, str.length - suffix2.length) == -1)
        alert('File type not allowed,\nAllowed file: *.jpg,*.jpeg');
            document.getElementById('fileToUpload').value='';
        
    

【讨论】：

if(str.indexOf(suffix, str.length - suffix.length) == -1 && str.indexOf(suffix2, str.length - suffix2.length) == -1)跨度>

@Nazri，但是，这不会减少在“上传文件资源管理器”中显示给用户的选择。

【参考方案6】：

另一种解决方案只有几行

function checkFile(i)
  i = i.substr(i.length - 4, i.length).toLowerCase();
  i = i.replace('.','');
  switch(i)
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'gif':
      // do OK stuff
      break;
    default:
      // do error stuff
      break;
  

【参考方案7】：

对于像您的“.drp”这样的特定格式。您可以直接在 accept=".drp" 中传递它，它将为此工作。

但没有“*”

<input name="Upload Saved Replay" type="file" accept=".drp" />
<br/>