立即用javascript輸入[type =「file」]值？

Question

我正在編寫一個網站，我需要從用戶那裏獲取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> 

Answer 1

希望它能幫助！

var _validFileExtensions = [".jpg", ".jpeg", ".pdf", ".png"]; 
 

 
function ValidateInput(oInput) { 
 
    if (oInput.type == "file") { 
 
    var sFileName = oInput.value; 
 
    if (sFileName.length > 0) { 
 
     var blnValid = false; 
 
     for (var j = 0; j < _validFileExtensions.length; j++) { 
 
     var sCurExtension = _validFileExtensions[j]; 
 
     if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { 
 
      blnValid = true; 
 
      break; 
 
     } 
 
     } 
 

 
     if (!blnValid) { 
 
     alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", ")); 
 
     oInput.value = ""; 
 
     return false; 
 
     } 
 
    } 
 
    } 
 
    return true; 
 
}

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

 
<label for="file"> 
 
    <div id="file-wrapper"> 
 
     <input id="file" type="file" name="file" onChange="ValidateInput(this);" /> 
 
     <div class="button smallbtn">Choose file</div> 
 
     <div id="filev">No file chosen</div> 
 
    </div> 
 
    </label>