使用javascript立即获取输入[type="；file"；]值？

我正在编写一个网站，我需要从用户那里获得PDF、JPG或PNG。 当用户选择文件时，我希望显示文件名。 此外，我想立即检查文件是否为PDF、JPG或PNG，以便如果不是这样的文件，则无法上载该文件

我的代码：

<style>
#file { display:none; }
</style>

<label for="file">  
    <div id="file-wrapper">  
        <input id="file" type="file" name="file" required/>
        <div class="button smallbtn">Choose file</div>
        <div id="filev">No file chosen</div>
    </div>
    </label>

    <script>   
       setInterval(function(){
            document.getElementById("filev").innerHTML = document.getElementById("file").value;
        }, 2000);
    </script>

#文件{显示：无；}
选择文件
没有选择任何文件
setInterval（函数（）{
document.getElementById（“filev”）.innerHTML=document.getElementById（“file”）.value；
}, 2000);

希望能有所帮助

var\u validFileExtensions=[“.jpg”、“.jpeg”、“.pdf”、“.png”]；
函数ValidateInput（oInput）{
if（oInput.type==“文件”）{
var sFileName=oInput.value；
如果（sFileName.length>0）{
var blnValid=false；
对于（变量j=0；j<_validFileExtensions.length；j++）{
var sCurExtension=_validfleextensions[j]；
if（sFileName.substr（sFileName.length-sCurExtension.length，sCurExtension.length）.toLowerCase（）==sCurExtension.toLowerCase（））{
blnValid=true；
打破
}
}
如果（！blnValid）{
警报（“对不起，+sFileName+”无效，允许的扩展名为：“+_validFileExtensions.join”（，”）；
oInput.value=“”；
返回false；
}
}
}
返回true；
}

#文件{
显示：无；
}
选择文件
没有选择任何文件