HTML 输入过滤器文件类型

Question

我正在尝试做一些非常简单的事情，但它没有过滤任何内容，并且显示“所有文件”。 这必须是动态代码。

HTML：

<input type="file" accept="{{fileType}}" />

JS（去掉了 if 子句）：

  if(false) {
            $scope.fileType = "application/vnd.oasis.opendocument.text";
        }
        else {
            $scope.fileType = "application/pdf"; // Only PDF files should be shown
        }

有什么想法吗？

Answer 1

您可以使用此 JavaScript 检查文件类型并仅允许某些文件类型：

<script type="text/javascript">
    var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "rar", "zip", "txt", "pdf"]; 
/* you can enter all your required file types in the above line */

    function CheckExtension(file) {
        /*global document: false */
        var filePath = file.value;
        var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
        var isValidFile = false;

        for (var i = 0; i < validFilesTypes.length; i++) {
            if (ext == validFilesTypes[i]) {
                isValidFile = true;
                break;
            }
        }

        if (!isValidFile) {
            file.value = null;
            alert("Invalid File. Valid extensions are:\n\n" + validFilesTypes.join(", "));
        }

        return isValidFile;
    }
</script>

此代码将所有必需的文件类型存储在 validFilesTypes 变量中。
您可以将其中存储的值更改为所需的文件类型。