?
This document uses PHP Chinese website manual Release
<input>元素type="file"讓用戶選擇一個或多個文件，通過表單提交上傳到服務器，或者通過 JavaScript 使用File API進行操作。
<input name="myFile" type="file">
值 | 表示所選文件路徑的DOMString。 |
|---|---|
活動 | 改變和輸入 |
支持的通用屬性 | 接受，多重，必需 |
IDL屬性 | 文件和價值 |
方法 | 選擇（） |
值
“文件輸入” value屬性包含一個DOMString表示所選文件的路徑。
注意：
如果選擇多個文件，則該字符串表示第一個選定的文件。JavaScript 可以通過輸入的訪問其他文件
FileList屬性（https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file（S 29％）。如果尚未選擇文件，則該字符串為
""（空）。該字符串前綴
C:\fakepath\為了防止惡意軟件猜測用戶的文件結構。
使用文件輸入
一個基本的例子
<form> <div> <label for="file">Choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>Submit</button> </div></form>
這會產(chǎn)生以下輸出：
注意：你也可以在 GitHub 上找到這個例子 - 查看源代碼，也可以看到它在線運行。
無論用戶的設備或操作系統(tǒng)如何，文件輸入都會提供一個按鈕，用于打開允許用戶選擇文件的文件選擇器對話框。
multiple如上所示，包含屬性指定可以一次選擇多個文件。用戶可以用他們選擇的平臺允許的任何方式從文件選擇器中選擇多個文件（例如按住Shift或Control，然后單擊）。如果您只希望用戶每次選擇一個文件<input>，則省略該multiple屬性。
提交示例時，每個選定文件的名稱將按以下方式添加到 URL 參數(shù)中： ?file=file1.txt&file=file2.txt
獲取有關選定文件的信息
所選文件'由元素的HTMLInputElement.files屬性返回 - 返回一個FileList包含File對象列表的對象。該FileList像一個數(shù)組的行為，所以你可以檢查其length屬性來獲取選定文件的數(shù)量。
每個File對象都包含以下信息：
name：文件名稱。lastModified：表示文件上次修改日期的數(shù)字，作為 UNIX 時間戳記。lastModifiedDate：Date表示文件上次修改日期和時間的對象。size：代表文件大小的數(shù)字（以字節(jié)為單位）。type：DOMString表示文件的MIME類型。
注意：您可以設置以及HTMLInputElement.files在所有現(xiàn)代瀏覽器中獲得它的價值- 這是最新版本添加到
Firefox 的版本57（見錯誤1384030）。
限制接受的文件類型
通常你不會想要任何類型的文件。例如，如果您的文件輸入允許用戶上傳個人資料圖片，那么您可能希望他們選擇與網(wǎng)絡兼容的圖片格式，例如 JPEG 或 PNG 。
可以使用accept屬性指定可接受的文件類型，該屬性采用允許的文件擴展名或 MIME 類型的逗號分隔列表。一些例子：
accept="image/png"或者accept=".png"- 接受 PNG 文件。accept="image/png, image/jpeg"或者accept=".png, .jpg, .jpeg"- 接受 PNG 或 JPEG 文件。accept="image/*"- 接受任何image/*MIME 類型的文件。（許多移動設備也可讓用戶在使用相機時拍攝照片。）accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"- 接受任何聞起來像 MS Word 文檔的東西。
讓我們看起來像一個更完整的例子：
<form> <div> <label for="profile_pic">Choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>Submit</button> </div></form>
這產(chǎn)生了與前面的例子類似的輸出：
注意：你也可以在 GitHub 上找到這個例子 - 查看源代碼，也可以看到它在線運行。
它可能看起來很相似，但如果您嘗試選擇帶有此輸入的文件，則會看到文件選取器只允許您選擇accept值中指定的文件類型（確切性質因瀏覽器和操作系統(tǒng)而異）。
accept屬性不會驗證所選文件的類型 - 它為瀏覽器提供了一些提示，以指導用戶選擇正確的文件類型。用戶仍然可以（在大多數(shù)情況下）在文件選擇器中切換選項，以使所有文件可選，然后選擇不正確的文件類型。
因此，請確保該accept屬性由適當?shù)姆掌鞫蓑炞C進行備份。
例子
在這個例子中，我們將展示一個稍微更高級的文件選擇器，它利用了該HTMLInputElement.files屬性中可用的文件信息，并展示了一些聰明的技巧。
注意：你可以在 GitHub - file-example.html上看到這個例子的完整源代碼。我們不會解釋 CSS ; JavaScript 是主要焦點。
首先，讓我們看看 HTML：
<form> <div> <label for="image_uploads">Choose images to upload (PNG, JPG)</label> <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> </div> <div class="preview"> <p>No files currently selected for upload</p> </div> <div> <button>Submit</button> </div></form>
這與我們以前見過的相似 - 沒有什么特別的評論。
接下來，我們來看看 JavaScript 。
在腳本的第一行中，我們獲得對表單輸入本身的引用，以及<div>具有類的元素.preview。接下來，我們隱藏了這個<input>元素 - 我們這樣做是因為文件輸入在瀏覽器的設計中往往是丑陋，難以設計風格以及不一致。您可以通過單擊它來激活輸入元素<label>，因此最好直觀地隱藏輸入并像標簽一樣設置按鈕的樣式，以便用戶如果想要上傳文件就知道要與之交互。
var input = document.querySelector('input');var preview = document.querySelector('.preview');input.style.opacity = 0;注意： opacity用于隱藏文件輸入而不是visibility: hidden或display: none，因為輔助技術將后兩種樣式解釋為文件輸入不是交互式的。
接下來，我們添加一個事件監(jiān)聽器到輸入中，當它的選擇值改變時（在這種情況下，當文件被選中時）。事件監(jiān)聽器調用我們的自定義updateImageDisplay()函數(shù)。
input.addEventListener('change', updateImageDisplay);每當updateImageDisplay()函數(shù)被調用時，我們：
使用
while循環(huán)清空預覽的前一個內容<div>。抓取
FileList包含所有選定文件信息的對象，并將其存儲在名為的變量中curFiles。通過檢查是否
curFiles.length等于0 來檢查是否未選擇文件。如果是，則在預覽中輸出一條消息，<div>指出沒有選擇任何文件。如果文件已被選中，我們遍歷每個人，打印有關它的信息到預覽
<div>。這里需要注意的事項：我們使用自定義
validFileType()函數(shù)來檢查文件是否具有正確的類型（例如accept屬性中指定的圖像類型）。如果是，我們：
將其名稱和文件大小打印到上一個列表項中
<div>（從curFiles[i].nameand 獲得curFiles[i].size）。自定義returnFileSize()函數(shù)以字節(jié)/ KB / MB返回格式良好的版本（默認情況下，瀏覽器以絕對字節(jié)報告大?。?。通過調用 CSS 并縮小圖像大小來生成圖像的縮略圖預覽，然后將該圖像插入到列表項中。
window.URL.createObjectURL(curFiles[i])如果文件類型無效，我們會在列表項中顯示一條消息，告訴用戶他們需要選擇不同的文件類型。
function updateImageDisplay() { while(preview.firstChild) {
preview.removeChild(preview.firstChild); } var curFiles = input.files; if(curFiles.length === 0) { var para = document.createElement('p');
para.textContent = 'No files currently selected for upload';
preview.appendChild(para); } else { var list = document.createElement('ol');
preview.appendChild(list); for(var i = 0; i < curFiles.length; i++) { var listItem = document.createElement('li'); var para = document.createElement('p'); if(validFileType(curFiles[i])) {
para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.'; var image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
listItem.appendChild(image);
listItem.appendChild(para); } else {
para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
listItem.appendChild(para); }
list.appendChild(listItem); } }}自定義validFileType()函數(shù)將File對象作為參數(shù)，然后遍歷允許的文件類型列表，檢查是否有任何文件的type屬性匹配。如果找到匹配項，則函數(shù)返回true。如果找不到匹配，則返回false。
var fileTypes = [ 'image/jpeg', 'image/pjpeg', 'image/png']function validFileType(file) { for(var i = 0; i < fileTypes.length; i++) { if(file.type === fileTypes[i]) { return true; } } return false;}returnFileSize()函數(shù)需要一個數(shù)字（取自當前文件size屬性的字節(jié)數(shù)），并將其轉換為格式良好的大?。ㄒ宰止?jié)/ KB / MB為單位）。
function returnFileSize(number) { if(number < 1024) { return number + 'bytes'; } else if(number > 1024 && number < 1048576) { return (number/1024).toFixed(1) + 'KB'; } else if(number > 1048576) { return (number/1048576).toFixed(1) + 'MB'; }}這個例子看起來像這樣 - 試一試：
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
HTML Living Standard該規(guī)范中的<input type =“file”>“的定義。 | 生活水平 | 初始定義 |
HTML 5.1該規(guī)范中的<input type =“file”>“的定義。 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | ? | 1.0 (1.7 or earlier) | (Yes) | 1.0 | 1.0 |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | iOS WebKit (Safari/Chrome/Firefox/etc) |
|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |