Question

<input type='file' name='userFile'>

现在当我点击浏览按钮时，浏览对话框将显示所有文件...如果我想过滤文件类型怎么办呢？

仅限图片或 .png ＆amp; .jpg ＆amp;的 .gifs文件
只有办公室文件，例如 .doc ＆amp; .docx ＆amp;的 .PPS

怎么做......

Answer 1

我认为你正在寻找接受参数。试试这个

<input type="file" accept="image/*" />

Answer 2

文件输入控件上有一个“accept”属性，您可以在其中指定所需的文件类型。从我所看到的，许多浏览器喜欢忽略它 - 可以指定的文件类型是MIME类型，因此严格正确的浏览器必须查看每个文件而不管扩展名，看看它是否是图像（如果是，它是什么类型）。

更新：至少Windows上的每个主要浏览器的某个版本现在至少提供了对accept属性的一些支持。（甚至IE支持它，从版本10开始。）但是，依赖它仍然有点早，因为IE 8和9仍然不支持它。总的来说支持有点不稳定。

Chrome似乎得到了全力支持。它使用自己内置的类型列表以及系统的...所以如果任何一个定义了类型，Chrome就知道要显示哪些文件。
IE 10支持文件扩展，并且MIME类型正常。它似乎只使用系统的MIME类型到扩展的映射，但是......这基本上意味着如果用户计算机上的某些内容没有使用正确的MIME类型注册这些扩展，IE将不会显示这些MIME类型的文件。
Opera似乎只支持MIME类型 - 扩展实际上禁用了过滤器 - 并且文件选择器的UI很糟糕。您必须选择一种类型才能查看该类型的文件。
Firefox似乎只支持一组有限的类型，并忽略其他类型和扩展名。
~~我没有Safari，也不打算下载它。如果有人可以记录Safari的支持......~~ 对safari的部分支持。 http://caniuse.com/#search=accept

您应该考虑添加属性，因此支持它的浏览器可以帮助用户更轻松地找到正确的文件。但我仍然建议您在选择文件后检查文件名，如果上传了错误扩展名的文件，则显示错误消息。

当然，肯定让服务器仔细检查文件是否是正确的类型。文件扩展名只是一个命名约定，很容易被破坏。即使我们可以信任浏览器（我们做不到），即使它确实尝试按照您的要求（可能没有）过滤内容，它实际验证.doc文件的可能性是真正的Word文档就在nil旁边。

Answer 3

它应该使用MIME_type：例如

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

这只会接受*.xlsx文件类型...

有关mime类型的列表，请查看以下链接：
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

Answer 4

您无法控制可以选择哪些文件，但您可以在选择文件后使用javascript读取文件名。然后，如果文件类型错误，您可以显示警告和/或禁用提交按钮。但是，请记住，您不能依赖扩展来告诉您文件是否真的是正确的类型。它只应被视为一种方式来帮助那些在发现您不支持该文件类型之前可能浪费时间上传大文件的用户。

这是一些示例代码。它使用jQuery，但你也可以在普通的javascript中做同样的事情。

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /\.txt$/.test(filename)) {
            alert('Please select a text file');
        }
    });
});

Answer 5

您可以使用JavaScript。请注意，使用JavaScript执行此操作的一个大问题是重置输入文件。好吧，这仅限于JPG（对于其他格式，您必须更改mime type和magic number）：

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

请注意，这是在最新版本的Firefox和Chrome以及IExplore 10上测试的。

For a complete list of mime types see Wikipedia

For a complete list of magic number see Wikipedia

Answer 6

您应该使用使用嵌入式Flash的one of the plugins，因为您无法使用普通的javascript

Answer 7

对于大多数文件过滤案例，我已经为客户端验证做了一个简单的方法。它实际上非常简单。现在，在你尝试实现它之前，要明白服务器必须检查这个文件，因为在有人改变.js甚至是HTML的情况下，javascript和HTML过滤并不是一个确定的事情。我没有包括所有实际的脚本，因为我喜欢看到其他人使用创造性思维来实现这些概念，但这些是我采取的步骤似乎有效，直到找到更好的答案：

创建一个查找输入并处理它的js对象。

为AjaxControlToolKit的AsyncFileUpload控件调用一个函数，例如OnClientUploadComplete。

在此函数内部，声明一个布尔变量：bIsAccepted（设置为false）和字符串sFileName（从args获取文件名后）。

在if..else语句中，

if(sFilename.indexOf(".(acceptedExtension1)") ||
   sFileName.indexOf(".(AcceptedExtension2)") )
{
   bIsAccepted = true;
}
else
{
   bIsAccepted = false;
}

然后

if(bIsAccepted)
{
//Process Data
}

在服务器上，设置已接受的文件扩展名列表并循环和处理类似将使该过程具有凝聚力和一致性，有效地允许UI和Code-Behind在几乎所有情况下过滤文件类型。

鉴于可以通过将名称更改为具有不同文件扩展名作为名称的一部分来绕过此功能，还应在提交到服务器进行进一步处理之前检查mime类型。

            [http://www.webmaster-toolkit.com/mime-types.shtml][1]

希望这有帮助！

Answer 8

使用MVC我们可以限制仅上传到zip文件

.HtmlAttributes(new { accept = ".zip*" })

HTML <input type =“file”/>应用过滤器

8 个答案: