在 Javascript/FileApi 中上传文件时如何检查文件是否具有所需的扩展名

Question

所以发生的事情我有点受困于 fileApi 的扩展，例如，当上传文件不是 .pdf 时，我看不出应该如何显示警报。我真的很喜欢一些指导。谢谢

Html

<form action="/Document" method="post" enctype="multipart/form-data">

        <div class="container">
            <div class="custom-file" style="margin-top: 25px; margin-bottom: 15px;">
                <input type="file" id="validatedCustomFile" name="document" required>
                <div style="color: red;"></div>
            </div>
            <div class="small">
                <ul>
                    <li>Maximum upload size is  / 1024) KB</li>
                </ul>
            </div>
            <div>

                <button type="submit" title="Next" class="btn btn-primary">Next</button>
                
            </div>
        </div>
    </form>

<script>
Js

    const InputFile = document.getElementById('validatedCustomFile');

    InputFile.addEventListener("change", function () {
        console.log(InputFile.files)
        for (const file of InputFile.files) {
            if (file.size > 1048576){
                alert(`${file.name} is to big! Max is 1024KB`);
            }
            if (file.type != '.pdf') {
                alert('This file type not allowed to be uploaded')
            }
        }    
    }
      
        )

</script>

Answer 1

这里需要设置文件的mime类型。在这里，我提到 application/pdf 而不是 ".pdf"

    const InputFile = document.getElementById('validatedCustomFile');

    InputFile.addEventListener("change", function () {
        console.log(InputFile.files)
        for (const file of InputFile.files) {
           
            if (file.size > 1048576){
                alert(`${file.name} is to big! Max is 1024KB`);
            }
            if (file.type != 'application/pdf') {
                alert('This file type not allowed to be uploaded')
            }
         
        }    
    }
      
        )

Answer 2

有一个简单的方法，只需添加到表单输入即可 accept=".pdf" 上传页面只会显示扩展名为 .pdf 的文件并隐藏其余部分。像这样的东西：<input type="file" id="validatedCustomFile" accept=".pdf" name="document" required> 会起作用。

在 Javascript/FileApi 中上传文件时如何检查文件是否具有所需的扩展名

How could I check that if the file has a desirable extension when uploading a file in Javascript/FileApi

javascript

forms

api

fileapi