11.1 元素 <input type="file">
網頁應用通常需要使用者上傳文件到伺服器。這對於上傳文件、圖像、視頻和其他資料型別很有用。HTML 提供了 <input type="file"> 元件 來建立文件上傳介面。以下我們將詳細討論這個元素的使用及其屬性，如 multiple 和 accept。
元素 <input type="file"> 創建了一個介面，允許使用者從他們的裝置中選擇文件並上傳到伺服器。這是 HTML 表單中的關鍵元素之一，允許 網頁應用集成文件上傳功能。
<input type="file"> 元素的主要屬性
type="file"— 確定該元素為文件選擇使用。name— 設定元素的名稱，將在將表單數據提交到伺服器時使用。multiple— 允許使用者同時選擇多個文件。accept— 指定可選擇的文件類型，使用 MIME 類型或文件擴展名。
<input type="file> 元素的使用範例
簡單範例
沒有額外屬性的文件上傳元素最簡單範例：
HTML
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">選擇文件:</label>
<input type="file" id="file" name="file">
<button type="submit">上傳</button>
</form>
11.2 屬性 multiple
元素 <input type="file"> 支援多個屬性以擴展其功能。我們將討論其中的兩個：multiple 和 accept。
屬性 multiple 允許使用者選擇多個文件進行上傳。當添加這個屬性時，使用者可以在文件選擇對話框中選擇多個文件。
使用範例：
HTML
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="files">選擇文件:</label>
<input type="file" id="files" name="files" multiple>
<button type="submit">上傳</button>
</form>
這很有用
在文件選擇對話框中，使用者可以按住 Ctrl (Mac 上為 Cmd) 或 Shift 鍵來選擇並上傳多個文件。
11.3 屬性 accept
屬性 accept 限制使用者可以選擇的文件類型。這對於確保使用者只上傳允許的文件類型很有用（例如，僅限圖像或文件）。
使用範例：
HTML
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="image">選擇圖像:</label>
<input type="file" id="image" name="image" accept="image/*">
<button type="submit">上傳</button>
</form>
屬性 accept 限制可選的文件類型。可以按照 MIME 類型或文件擴展名進行限制。在上面的範例中，使用者只能選擇圖像文件。
accept 屬性的範例值
按文件類型限制：
accept="image/*": 任意圖像accept="video/*": 任意視頻文件accept="audio/*": 任意音頻文件
按文件擴展名限制：
accept=".jpg/.jpeg/.png": 僅 JPEG 和 PNG 格式的圖像accept=".pdf/.doc/.docx": 僅 PDF 和 Word 文件
11.4 在客戶端處理文件
有時會需要在將文件提交到伺服器前先在客戶端進行處理。例如，可以顯示圖像預覽或檢查文件大小。這可以用 JavaScript 來實現。
圖像預覽範例：
HTML
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="image">選擇圖像:</label>
<input type="file" id="image" name="image" accept="image/*">
<div id="preview"></div>
<button type="submit">上傳</button>
</form>
JavaScript
document.getElementById('image').addEventListener('change', function(event) {
const preview = document.getElementById('preview');
preview.innerHTML = '';
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.maxWidth = '200px';
preview.appendChild(img);
}
reader.readAsDataURL(file);
}
});
解釋
FileReader: 用於在客戶端讀取文件內容reader.onload: 當文件讀取完成後觸發的事件reader.readAsDataURL(file): 方法，用於讀取文件並將其編碼為 Data URL，這樣可以在<img>標籤中顯示
GO TO FULL VERSION