資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 JavaScript 上傳檔案時的檔案型別驗證
專注於就業的社交媒體平臺允許使用者建立帳戶，並要求上傳必要的文件，以便招聘人員進行分析。為了從使用者那裡收集文件，這些網站會在其使用者詳細資訊表單中提供“上傳檔案”或“選擇檔案”選項；並且它們只接受特定的檔案型別，例如“.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”，則會在螢幕上顯示檔名。否則，會顯示一條警報，提示“無效的檔案型別”。
6K+ 閱讀量
