資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何允許檔案輸入型別僅接受影像檔案
HTML 中的<input>標籤建立一個接受使用者輸入的輸入控制元件。根據屬性的型別，輸入欄位可能具有不同的形式。它是一個僅具有屬性的空元素。<input>標籤通常位於<form>標籤內，並且可以透過簡單地設定適當的type屬性來用於表示文字欄位、複選框、下拉列表、按鈕和其他輸入。
它還有許多其他屬性，例如value、placeholder、name、accept、size、height、width等。
<input>標籤的行為根據其type屬性的值而有很大差異。type屬性指定要顯示的<input>元素的型別。它不是必需的屬性，因此，如果未指定此屬性，則預設型別為文字。
語法
<input type=”value”>
type屬性的一些值包括file、image、email、number、password、submit、button等。
輸入型別：檔案
file輸入型別指定檔案選擇控制元件。此元素使用按鈕和標籤呈現，儘管外觀因瀏覽器而異。該按鈕啟動檔案選擇對話方塊，標籤顯示所選檔名(s)。
我們還可以將“multiple”屬性新增到檔案選擇欄位以允許選擇多個檔案。語法如下所示。
<input type="file">
檔案輸入型別的屬性
Value：檔案輸入的value屬性包含一個字串，該字串表示所選檔案(s)的路徑。如果尚未選擇任何檔案，則值為一個空字串("")。當用戶選擇多個檔案時，value表示列表中的第一個檔案。
Accept：accept屬性值是一個字串，指定檔案輸入應接受哪些檔案型別。此字串是由逗號分隔的唯一檔案型別說明符列表。因為給定的檔案型別可以透過多種方式識別，所以當您需要特定格式的檔案時，提供一組全面的型別說明符很有用。
Capture：capture屬性值是一個字串，指定將使用哪個攝像頭進行影像捕獲。值user表示應使用使用者側的攝像頭。值environment指定使用外接攝像頭。
Multiple：當指定multiple布林屬性時，檔案輸入允許使用者選擇多個檔案。
當我們使用<input type="file">時，它接受所有檔案型別。但是，可以將檔案型別限制為僅影像或特定的影像副檔名。這可以透過以下幾種方式完成
使用“accept”屬性
眾所周知，‘accept’屬性指定使用者可以從檔案輸入對話方塊中選擇的什麼檔案型別的過濾器。可以使用此屬性來將檔案型別限制為僅影像檔案的方法有兩種。
示例（將檔案輸入型別限制為影像）
以下示例演示了使用‘accept’屬性僅接受影像檔案而不指定任何副檔名的用法。
<!DOCTYPE html>
<html>
<head>
<title>How to Allow the File Input Type to Accept Only Image Files</title>
</head>
<body>
<input type="file" id="example1" name="example1" accept="image/*">
</body>
</html>
示例（將檔案輸入型別限制為影像副檔名）
以下示例演示了使用‘accept’屬性僅接受指定副檔名的影像檔案的用法。
<!DOCTYPE html>
<html>
<head>
<title>How to Allow the File Input Type to Accept Only Image Files</title>
</head>
<body>
<input type="file" id="example2" name="example2" accept="image/x-png,image/gif,image/jpeg">
</body>
</html>
Or
<!DOCTYPE html>
<html>
<head>
<title>How to Allow the File Input Type to Accept Only Image Files</title>
</head>
<body>
<input type="file" id="example2" name="example2" accept=".png, .jpg, .jpeg" />
</body>
</html>
使用JavaScript驗證
此示例利用輸入標籤的accept屬性以及伺服器端驗證來驗證內容是否確實是預期檔案型別。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to Allow the File Input Type to Accept Only Image Files</title>
</head>
<body>
<body>
<input type="file" id="fileName" name="example3" accept=".jpg,.jpeg,.png,.gif" onchange="validateFileType()" />
<script type="text/javascript">
function validateFileType() {
var fileName = document.getElementById("fileName").value;
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
if (extFile == "jpg" || extFile == "jpeg" || extFile == "png" || extFile == "gif") {
//TO DO
} else {
alert("Only jpg, jpeg, png and gif files are allowed!");
}
}
</script>
</body>
</html>
如果所選檔案不屬於指定的影像副檔名，則螢幕上會彈出一個視窗，通知使用者有效的副檔名。
3K+ 瀏覽量
