如何强制输入类型文件只接受 .html 或 .htm 文件答案

【问题标题】：how to force input type file to accept only .html or .htm files如何强制输入类型文件只接受 .html 或 .htm 文件
【发布时间】：2013-03-03 19:54:05
【问题描述】：

我在这里尝试通过单击按钮上传 html/htm 文件。为此，我正在使用“输入类型=文件”，我已将其“接受”属性设置为仅接受这样的 html/htm 扩展名：

<input type="file" name="htmla" id="htmla" accept="text/html" />

但它在不同的浏览器中表现出不同的行为

在Firefox中，它接受所有文件

在 chrome 中，它接受 html 以及图像

在IE中，和firefox一样

有没有办法通过 javascript 或 jquery 等任何方法使其仅接受 html/htm 文件？

注意：我在 MVC 4 中使用此控件

【问题讨论】：

标签： html asp.net-mvc input-type-file

【解决方案1】：

<script>
  function test(obj,filter){

    var file = obj.value.match(/[^\/\\]+$/gi)[0];
    var rx = new RegExp('\\.(' + (filter?filter:'') + ')$','gi');
    if(filter&&file&&!file.match(rx)){
      alert("check the file type, only html is accepted");
      //input file
      //it's totally a bad idea...
      //document.body.innerHTML = "<input type='file' onchange=\"test(this,'html');\" >";

    }
  }
</script>
<body>
    <input id="inputFile" type="file" onchange="test(this,'html');">
</body>

也许这应该适合你swfupload

【讨论】：

document.body.innerHTML = 如果页面上的元素多于输入元素，则不是一个好主意。要么只替换输入元素，要么改变它的值。
你的方法效果很好......但我很困惑我应该选择哪种方法......你的或@Sachin的......哪个更好？
不管怎样，都不重要。您必须在后台验证文件类型。

【解决方案2】：

在标准输入控件中没有什么可以实现的。

是的，文件输入控件上有一个"accept" 属性，您可以在其中指定所需的文件类型，但许多浏览器无法识别。所以你能做的最好的就是检查用户使用 Javascript 或 Jquery 选择的文件的文件名（扩展名）。

function ValidateFile() {
        var fileName = document.getElementById("inputFileId").value
        if (fileName == "") {
            alert("upload a valid File with .htm extension");
            return false;
        }
        else if (fileName.split(".")[1].toUpperCase() == "HTM")
            return true;
        else {
            alert("Invalid File");
            return false;
        }
        return true;
    }

但没有什么可以阻止用户将可执行文件重命名为 .html 为例。

【讨论】：

你说的是真的……所以我想我只能用这种方法
是的，您可以使用它。它会帮助你很多，但正如我所说的it is not possible to prevent user from renaming executable to .html。因此，如果它不是您主要关心的问题，那么您可以使用它。:)
我对我应该应用什么方法感到困惑。urs 和@Scy 给出的答案都可以正常工作..但是哪个更好？
您可以尝试其中任何一种。 Scy 使用正则表达式完成了相同的工作，而我使用了简单的 string.split。所以这取决于你。如果您不想要更多if/else，那么您可以尝试@scy 解决方案。
den 我想我应该使用你的方法..它看起来很简单，很容易向其他人解释 ;)

【解决方案3】：

这是 HTML5 特定的属性。并非所有浏览器都支持它。对于那些不这样做的人，您将不得不在服务器上执行检查。另一种可能性是检查使用 javascript 选择的文件的扩展名。基本上你可以像这样得到选定的文件名：$('#htmla').val()。然后是扩展的正则表达式。

【讨论】：