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變量中。
您可以將存儲在其中的值更改為所需的文件類型。