<input type="file"> 限制檔案型別

admin發表於2020-04-02
型別

通過<input type="file"> 檔案域可以選中上傳各種型別檔案。

可以通過其 accept 屬性對選中上傳的檔案進行限制篩選。

簡單程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 12px;
  border: 2px dotted green;
}
</style>
</head>
<body>
  <div id="show">限制只能上傳 png 圖片</div>
<input type="file" multiple accept="image/png"/> 
</body>
</html>

上面程式碼規定只能上傳png格式的圖片，大家可以自行測試。

下面對accept 屬性值規則進行一下簡單分析：

（1）.如果只規定一個型別，可以採用 accept="image/png" 類似方式。

（2）.如果規定多個型別，可以採用 accept="image/png, image/jpeg" 類似格式，用逗號分隔。

（3）.如果要接受所有型別圖片，可以採用 accept="image/*" 類似方式。

上面僅以 圖片格式作為例子，其他型別格式可以以類似規則方式設定。

相關文章