僅關注就業的社交媒體平臺允許用戶創建帳戶，并會被要求上傳必要的文件，以便招聘人員可以對其進行分析。為了收集用戶的文件，這些網站將在其用戶詳細信息表單中提供“上傳文件”或“選擇文件”選項；它們只接受特定的文件類型，例如“.pdf”、“.jpg”、“.png”等。此過程稱為文件驗證，可以使用 JavaScript 來完成。
在本文中，我們將設計一個使用 JavaScript 驗證文件類型的選項。為此，方法如下 –
第 1 步 – 創建一個名為 validateFileType() 的函數。
步驟 2 – 當文件輸入字段值更改時，觸發 validateFileType() 函數。
第 3 步 – 使用 document.getElementById(‘fileInput’).files[0] 從文件輸入字段檢索所選文件。
第 4 步 – 定義一個名為 allowedTypes 的數組，其中包含允許的文件類型（例如“image/jpeg”、“image/png”、“application/pdf”）。
第5步 – 使用includes()方法檢查所選文件的類型是否包含在allowedTypes數組中。
如果在allowedTypes 數組，在屏幕上顯示文件名。
如果未找到文件類型，請執行以下步驟。
第 6 步 – 向用戶顯示一條警告消息，指出“文件類型無效。請選擇 JPEG、PNG 或 PDF 文件。”
第 7 步 – 通過將 document.getElementById(‘fileInput’).value 設置為空字符串來清除文件輸入字段的名稱。
示例
在下面的示例中，我們嘗試在使用上述方法上傳時驗證文件類型 –
<!DOCTYPE html>
<html>
<head>
<title>File Type Validation Example</title>
<script>
function validateFileType() {
var selectedFile = document.getElementById('fileInput').files[0];
var allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
if (!allowedTypes.includes(selectedFile.type)) {
alert('Invalid file type. Please upload a JPEG, PNG, or PDF file.');
document.getElementById('fileInput').value = '';
}
}
</script>
</head>
<body>
<h1>File Type Validation Example</h1>
<input type="file" id="fileInput" onchange="validateFileType()">
</body>
</html>
登錄后復制
執行上述程序后，嘗試上傳文件，如果文件是“.jpg”、“.png”或“.pdf”，屏幕上會顯示文件名。否則，它將顯示一條警告，指出“文件類型無效”。
以上就是使用 JavaScript 上傳時進行文件類型驗證的詳細內容，更多請關注www.92cms.cn其它相關文章！
