HTML input file 檔案域

admin發表於2018-10-25
HTML

<input> 標籤 type 屬性值設定為 file 即可建立一個檔案域。

使用檔案域時，form 的 enctype 屬性值必須設定為“multipart/form-data”。

檔案域可以實現檔案的上傳，比如圖片、壓縮包等。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  檔案上傳:<input type="file" name="file" />
</form>
</body>
</html>

上面程式碼簡單演示了檔案域的使用，預設情況下它的表現形式在不同瀏覽器或許有所不同。

特別說明：通常情況下，利用 name 屬性將表單資料提交到後臺。

檔案域還具有其他屬性，下面分別做一下介紹：

（1）.required（HTML5）:規定檔案域內容是必填的。

（2）.form（HTML5）:規定檔案域所屬的一個或多個表單。

（3）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（4）.disabledy：設定檔案域為不可用。

（5）.accept（HTML5）：規定允許上傳的檔案MIME型別。

（5）.multiple（HTML5）：規定檔案域可以一次上傳多個檔案。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  檔案上傳:<input type="file" required name="file" />
  <input type="submit" value="提交表單">
</form>
</body>
</html>

通過required設定檔案域為必填專案，否則報錯。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  檔案上傳:<input type="file" autofocus  name="file" />
  <input type="submit" value="提交表單">
</form>
</body>
</html>

通過autofocus屬性設定載入完畢後，自動設定檔案域獲取焦點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  檔案上傳:<input type="file" disabled  name="file" />
  <input type="submit" value="提交表單">
</form>
</body>
</html>

通過disabled屬性，設定檔案域為不可用。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  檔案上傳:
  <br/>
  <input type="file"  name="file" accept="text/plain"/>
  <input type="submit" value="提交表單">
</form>
</body>
</html>

通過accept屬性規定檔案域只能上傳純本文檔案。

特別說明：永遠不要相信前端驗證限制的安全性，所以還需要在後端進行限制。

相關文章