本篇內(nèi)容介紹了“HTML文件上傳的技巧有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)文成免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過(guò)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
我們可以將input 類型指定為file，以在Web應(yīng)用程序中使用文件上傳功能。
input filte 提供按鈕上傳一個(gè)或多個(gè)文件。 默認(rèn)情況下，它使用操作系統(tǒng)的本機(jī)文件瀏覽器上傳單個(gè)文件。成功上傳后，File API 使得可以使用簡(jiǎn)單的 JS 代碼讀取File對(duì)象。 要讀取File對(duì)象，我們需要監(jiān)聽(tīng) change事件。
首先，通過(guò)id獲取文件上傳的實(shí)例:
重慶分公司
重慶分公司
const fileUploader = document.getElementById('file-uploader');然后添加一個(gè)change 事件偵聽(tīng)器，以在上傳完成后讀取文件對(duì)象， 我們從event.target.files屬性獲取上傳的文件信息：
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
console.log('files', files);
});在控制臺(tái)中觀察輸出結(jié)果，這里關(guān)注一下FileList數(shù)組和File對(duì)象，該對(duì)象具有有關(guān)上傳文件的所有元數(shù)據(jù)信息。
如果我們想上傳多個(gè)文件，需要在標(biāo)簽上添加 multiple 屬性：
現(xiàn)在，我們可以上傳多個(gè)文件了，以前面事例為基礎(chǔ)，選擇多個(gè)文件上傳后，觀察一下控制臺(tái)的變化：
每當(dāng)我們上傳文件時(shí)，File對(duì)象都有元數(shù)據(jù)信息，例如file name，size，last update time，type 等等。這些信息對(duì)于進(jìn)一步的驗(yàn)證和特殊處理很有用。
const fileUploader = document.getElementById('file-uploader');
// 聽(tīng)更 change 件并讀取元數(shù)據(jù)
fileUploader.addEventListener('change', (event) => {
// 獲取文件列表數(shù)組
const files = event.target.files;
// 遍歷并獲取元數(shù)據(jù)
for (const file of files) {
const name = file.name;
const type = file.type ? file.type: 'NA';
const size = file.size;
const lastModified = file.lastModified;
console.log({ file, name, type, size, lastModified });
}
});下面是單個(gè)文件上傳的輸出結(jié)果：
accept 屬性我們可以使用accept屬性來(lái)限制要上載的文件的類型，如果只想上傳的文件格式是 .jpg，.png 時(shí)，可以這么做：
在上面的代碼中，只能選擇后綴是.jpg和.png的文件。
成功上傳文件后顯示文件內(nèi)容，站在用戶的角度上，如果上傳之后，沒(méi)有一個(gè)預(yù)覽的，就很奇怪也不體貼。
我們可以使用FileReader對(duì)象將文件轉(zhuǎn)換為二進(jìn)制字符串。 然后添加load 事件偵聽(tīng)器，以在成功上傳文件時(shí)獲取二進(jìn)制字符串。
// FileReader 實(shí)例
const reader = new FileReader();
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
const file = files[0];
reader.readAsDataURL(file);
reader.addEventListener('load', (event) => {
const img = document.createElement('img');
imageGrid.appendChild(img);
img.src = event.target.result;
img.alt = file.name;
});
});如果用戶上傳圖片過(guò)大，為了不讓服務(wù)器有壓力，我們需要限制圖片的大小，下面是允許用戶上傳小于 1M 的圖片，如果大于 1M 將上傳失敗。
fileUploader.addEventListener('change', (event) => {
// Read the file size
const file = event.target.files[0];
const size = file.size;
let msg = '';
// 檢查文件大小是否大于1MB
if (size > 1024 * 1024) {
msg = `The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}`;
} else {
msg = ` A ${returnFileSize(size)} file has been uploaded successfully. `;
}
feedback.innerHTML = msg;
}); 更好的用戶體驗(yàn)是讓用戶知道文件上傳進(jìn)度，前面我們用過(guò)了FileReader以及讀取和加載文件的事件。
const reader = new FileReader();
FileReader還有一個(gè)progress 事件，表示當(dāng)前上傳進(jìn)度，配合HTML5的progress標(biāo)簽，我們來(lái)模擬一下文件的上傳進(jìn)度。
reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
// 計(jì)算完成百分比
const percent = (event.loaded / event.total) * 100;
// 將值綁定到 `progress`標(biāo)簽
progress.value = percent;
}
});
我們可以上傳整個(gè)目錄嗎?嗯，這是可能的，但有一些限制。有一個(gè)叫做webkitdirectory的非標(biāo)準(zhǔn)屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳)，它允許我們上傳整個(gè)目錄。
目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳，具體可以看下百度云盤(pán)的網(wǎng)頁(yè)版的上傳按鈕，在火狐下就支持按照文件進(jìn)行上傳，而在谷歌和Edge下，就會(huì)給用戶提供一個(gè)下拉，讓用戶選擇是根據(jù)文件進(jìn)行上傳還是根據(jù)文件夾進(jìn)行上傳。
用戶必須需要確認(rèn)才能上傳目錄
用戶單擊“上傳”按鈕后，就會(huì)進(jìn)行上傳。 這里要注意的重要一點(diǎn)。 FileList數(shù)組將以平面結(jié)構(gòu)的形式包含有關(guān)上載目錄中所有文件的信息。 對(duì)于每個(gè)File對(duì)象，webkitRelativePath屬性表示目錄路徑。
例如，上傳一個(gè)主目錄及其下的其他文件夾和文件：
現(xiàn)在，F(xiàn)ile 對(duì)象將將webkitRelativePath填充為：
不支持文件上傳的拖拽就有點(diǎn) low 了，不是嗎?我們來(lái)看看如何通過(guò)幾個(gè)簡(jiǎn)單的步驟實(shí)現(xiàn)這一點(diǎn)。
首先，創(chuàng)建一個(gè)拖放區(qū)域和一個(gè)可選的區(qū)域來(lái)顯示上傳的文件內(nèi)容。
