?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
<input>元素type="file"讓用戶選擇一個(gè)或多個(gè)文件，通過表單提交上傳到服務(wù)器，或者通過 JavaScript 使用File API進(jìn)行操作。
<input name="myFile" type="file">
值 | 表示所選文件路徑的DOMString。 |
|---|---|
活動(dòng) | 改變和輸入 |
支持的通用屬性 | 接受，多重，必需 |
IDL屬性 | 文件和價(jià)值 |
方法 | 選擇（） |
值
“文件輸入” value屬性包含一個(gè)DOMString表示所選文件的路徑。
注意：
如果選擇多個(gè)文件，則該字符串表示第一個(gè)選定的文件。JavaScript 可以通過輸入的訪問其他文件
FileList屬性（https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file（S 29％）。如果尚未選擇文件，則該字符串為
""（空）。該字符串前綴
C:\fakepath\為了防止惡意軟件猜測用戶的文件結(jié)構(gòu)。
使用文件輸入
一個(gè)基本的例子
<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>
這會(huì)產(chǎn)生以下輸出：
注意：你也可以在 GitHub 上找到這個(gè)例子 - 查看源代碼，也可以看到它在線運(yùn)行。
無論用戶的設(shè)備或操作系統(tǒng)如何，文件輸入都會(huì)提供一個(gè)按鈕，用于打開允許用戶選擇文件的文件選擇器對(duì)話框。
multiple如上所示，包含屬性指定可以一次選擇多個(gè)文件。用戶可以用他們選擇的平臺(tái)允許的任何方式從文件選擇器中選擇多個(gè)文件（例如按住Shift或Control，然后單擊）。如果您只希望用戶每次選擇一個(gè)文件<input>，則省略該multiple屬性。
提交示例時(shí)，每個(gè)選定文件的名稱將按以下方式添加到 URL 參數(shù)中： ?file=file1.txt&file=file2.txt
獲取有關(guān)選定文件的信息
所選文件'由元素的HTMLInputElement.files屬性返回 - 返回一個(gè)FileList包含File對(duì)象列表的對(duì)象。該FileList像一個(gè)數(shù)組的行為，所以你可以檢查其length屬性來獲取選定文件的數(shù)量。
每個(gè)File對(duì)象都包含以下信息：
name：文件名稱。lastModified：表示文件上次修改日期的數(shù)字，作為 UNIX 時(shí)間戳記。lastModifiedDate：Date表示文件上次修改日期和時(shí)間的對(duì)象。size：代表文件大小的數(shù)字（以字節(jié)為單位）。type：DOMString表示文件的MIME類型。
注意：您可以設(shè)置以及HTMLInputElement.files在所有現(xiàn)代瀏覽器中獲得它的價(jià)值- 這是最新版本添加到
Firefox 的版本57（見錯(cuò)誤1384030）。
限制接受的文件類型
通常你不會(huì)想要任何類型的文件。例如，如果您的文件輸入允許用戶上傳個(gè)人資料圖片，那么您可能希望他們選擇與網(wǎng)絡(luò)兼容的圖片格式，例如 JPEG 或 PNG 。
可以使用accept屬性指定可接受的文件類型，該屬性采用允許的文件擴(kuò)展名或 MIME 類型的逗號(hào)分隔列表。一些例子：
accept="image/png"或者accept=".png"- 接受 PNG 文件。accept="image/png, image/jpeg"或者accept=".png, .jpg, .jpeg"- 接受 PNG 或 JPEG 文件。accept="image/*"- 接受任何image/*MIME 類型的文件。（許多移動(dòng)設(shè)備也可讓用戶在使用相機(jī)時(shí)拍攝照片。）accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"- 接受任何聞起來像 MS Word 文檔的東西。
讓我們看起來像一個(gè)更完整的例子：
<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 上找到這個(gè)例子 - 查看源代碼，也可以看到它在線運(yùn)行。
它可能看起來很相似，但如果您嘗試選擇帶有此輸入的文件，則會(huì)看到文件選取器只允許您選擇accept值中指定的文件類型（確切性質(zhì)因?yàn)g覽器和操作系統(tǒng)而異）。
accept屬性不會(huì)驗(yàn)證所選文件的類型 - 它為瀏覽器提供了一些提示，以指導(dǎo)用戶選擇正確的文件類型。用戶仍然可以（在大多數(shù)情況下）在文件選擇器中切換選項(xiàng)，以使所有文件可選，然后選擇不正確的文件類型。
因此，請(qǐng)確保該accept屬性由適當(dāng)?shù)姆?wù)器端驗(yàn)證進(jìn)行備份。
例子
在這個(gè)例子中，我們將展示一個(gè)稍微更高級(jí)的文件選擇器，它利用了該HTMLInputElement.files屬性中可用的文件信息，并展示了一些聰明的技巧。
注意：你可以在 GitHub - file-example.html上看到這個(gè)例子的完整源代碼。我們不會(huì)解釋 CSS ; JavaScript 是主要焦點(diǎn)。
首先，讓我們看看 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>
這與我們以前見過的相似 - 沒有什么特別的評(píng)論。
接下來，我們來看看 JavaScript 。
在腳本的第一行中，我們獲得對(duì)表單輸入本身的引用，以及<div>具有類的元素.preview。接下來，我們隱藏了這個(gè)<input>元素 - 我們這樣做是因?yàn)槲募斎朐跒g覽器的設(shè)計(jì)中往往是丑陋，難以設(shè)計(jì)風(fēng)格以及不一致。您可以通過單擊它來激活輸入元素<label>，因此最好直觀地隱藏輸入并像標(biāo)簽一樣設(shè)置按鈕的樣式，以便用戶如果想要上傳文件就知道要與之交互。
var input = document.querySelector('input');var preview = document.querySelector('.preview');input.style.opacity = 0;注意： opacity用于隱藏文件輸入而不是visibility: hidden或display: none，因?yàn)檩o助技術(shù)將后兩種樣式解釋為文件輸入不是交互式的。
接下來，我們添加一個(gè)事件監(jiān)聽器到輸入中，當(dāng)它的選擇值改變時(shí)（在這種情況下，當(dāng)文件被選中時(shí)）。事件監(jiān)聽器調(diào)用我們的自定義updateImageDisplay()函數(shù)。
input.addEventListener('change', updateImageDisplay);每當(dāng)updateImageDisplay()函數(shù)被調(diào)用時(shí)，我們：
使用
while循環(huán)清空預(yù)覽的前一個(gè)內(nèi)容<div>。抓取
FileList包含所有選定文件信息的對(duì)象，并將其存儲(chǔ)在名為的變量中curFiles。通過檢查是否
curFiles.length等于0 來檢查是否未選擇文件。如果是，則在預(yù)覽中輸出一條消息，<div>指出沒有選擇任何文件。如果文件已被選中，我們遍歷每個(gè)人，打印有關(guān)它的信息到預(yù)覽
<div>。這里需要注意的事項(xiàng)：我們使用自定義
validFileType()函數(shù)來檢查文件是否具有正確的類型（例如accept屬性中指定的圖像類型）。如果是，我們：
將其名稱和文件大小打印到上一個(gè)列表項(xiàng)中
<div>（從curFiles[i].nameand 獲得curFiles[i].size）。自定義returnFileSize()函數(shù)以字節(jié)/ KB / MB返回格式良好的版本（默認(rèn)情況下，瀏覽器以絕對(duì)字節(jié)報(bào)告大?。?。通過調(diào)用 CSS 并縮小圖像大小來生成圖像的縮略圖預(yù)覽，然后將該圖像插入到列表項(xiàng)中。
window.URL.createObjectURL(curFiles[i])如果文件類型無效，我們會(huì)在列表項(xiàng)中顯示一條消息，告訴用戶他們需要選擇不同的文件類型。
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對(duì)象作為參數(shù)，然后遍歷允許的文件類型列表，檢查是否有任何文件的type屬性匹配。如果找到匹配項(xiàng)，則函數(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ù)需要一個(gè)數(shù)字（取自當(dāng)前文件size屬性的字節(jié)數(shù)），并將其轉(zhuǎn)換為格式良好的大小（以字節(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'; }}這個(gè)例子看起來像這樣 - 試一試：
規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
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) |