本文已整理到 Github，地址 ?? blog。
如果我的內(nèi)容幫助到了您，歡迎點個 Star ?????? 鼓勵鼓勵 :) ~~
我希望我的內(nèi)容可以幫助你“懵耄現(xiàn)在我專注于前端領(lǐng)域迷殿，但我也將分享我在有限的時間內(nèi)看到和感受到的東西。
簡單文件上傳
文件上傳的傳統(tǒng)形式乍钻，是使用表單元素 file：
<input type="file" id="file-uploader">
你可以添加 change 事件監(jiān)聽器讀取 event.target.files 文件對象肛循。
const fileUploader = document.getElementById('file-uploader')
fileUploader.addEventListener('change', (e) => {
const files = e.target.files
console.log('files', files)
})
多個文件上傳
使用 multiple 屬性
<input type="file" id="file-uploader" multiple />
文件元數(shù)據(jù)
在成功上傳文件內(nèi)容后铭腕，您可能需要顯示該文件內(nèi)容。對于圖片多糠，如果我們在上傳后不立即將上傳的圖片顯示給用戶累舷，則會感到困惑。
每當(dāng)上傳文件時夹孔，File 對象都會包含元數(shù)據(jù)信息被盈，如文件名稱、大小搭伤、上次更新時間只怎、類型等。此信息可用于進一步驗證和決策闷畸。
const fileUploader = document.getElementById('file-uploader')
// 偵聽更改事件并讀取元數(shù)據(jù)
fileUploader.addEventListener('change', (e) => {
// 獲取文件列表數(shù)組
const files = e.target.files
// 循環(huán)瀏覽文件并獲取元數(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 })
}
})
上傳前預(yù)覽圖像
我們準(zhǔn)備一個上傳文件控件尝盼，并為預(yù)覽所選文件準(zhǔn)備 img 元素，結(jié)構(gòu)如下：
<input type="file" id="fileInput" />
<img id="preview" />
getElementById() 方法可以獲取這兩個元素：
const fileEle = document.getElementById('fileInput')
const previewEle = document.getElementById('preview')
使用 URL.createObjectURL() 方法
URL.createObjectURL() 方法包含一個表示參數(shù)中給出的對象的 URL佑菩。這個新的 URL 對象表示指定的 File 對象或 Blob 對象盾沫。
fileEle.addEventListener('change', function (e) {
// 獲取所選文件
const file = e.target.files[0]
// 創(chuàng)建引用該文件的新 URL
const url = URL.createObjectURL(file)
// 設(shè)置預(yù)覽元素的源
previewEle.src = url
})
使用 FileReader 的 readAsDataURL() 方法
- 使用
FileReader對象將文件轉(zhuǎn)換為二進制字符串。然后添加load事件偵聽器殿漠，以獲得成功文件上傳的二進制字符串赴精。 -
FileReader.readAsDataURL()方法用于讀取指定的Blob或File對象。
// 獲取 FileReader 的實例
const reader = new FileReader()
fileUploader.addEventListener('change', (e) => {
const files = e.target.files
const file = files[0]
// 上傳后獲取文件對象绞幌，以 URL 二進制字符串的形式讀取數(shù)據(jù)
reader.readAsDataURL(file)
// 加載后蕾哟，對字符串進行處理
reader.addEventListener('load', (e) => {
// 設(shè)置預(yù)覽元素的源
previewEle.src = reader.result
})
})
accept 屬性
使用 accept 屬性來限制要上傳的文件類型。
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
上面示例中莲蜘，瀏覽器將只允許具有 .jpg 和 .png 的文件類型谭确。
驗證文件大小
我們讀取了文件的大小元數(shù)據(jù)，可以使用它進行文件大小驗證票渠。您可以允許用戶上傳高達 1MB 的圖像文件逐哈。
// 文件上載更改事件的偵聽器
fileUploader.addEventListener('change', (event) => {
// 讀取文件大小
const file = event.target.files[0]
const size = file.size
let msg = ''
// 檢查文件大小是否大于 1MB，提示對應(yīng)消息问顷。
if (size > 1024 * 1024) {
msg = `<span style="color: red;">允許的文件大小為 1MB昂秃。您嘗試上載的文件屬于${returnFileSize(size)}</span>`
} else {
msg = `<span style="color: green;"> ${returnFileSize(size)} 文件已成功上載。 </span>`
}
// 向用戶顯示消息
feedback.innerHTML = msg
})
顯示文件上傳進度
更好的可用性是讓用戶了解文件上傳進度杜窄。XMLHttpRequest 第二版還定義了一個 progress 事件肠骆，可以用來制作進度條。
先在頁面中放置一個 progress 標(biāo)簽
<label id="progress-label" for="progress"></label>
<progress id="progress" value="0" max="100" value="0">0</progress>
定義 progress 事件的回調(diào)函數(shù)
const reader = new FileReader()
reader.addEventListener('progress', (e) => {
if (e.loaded && e.total) {
// 計算完成百分比
const percent = (e.loaded / e.total) * 100
// 將值設(shè)置為進度組件
progress.value = percent
}
})
上傳目錄
有一個非標(biāo)準(zhǔn)屬性 webkitdirectory塞耕，使我們能夠上傳整個目錄蚀腿。
雖然最初僅針對基于 WebKit 的瀏覽器實施，但 WebkitDirectory 在微軟 Edge 以及 Firefox 50 及以后也可用扫外。然而唯咬，即使它有相對廣泛的支持纱注，它仍然不是標(biāo)準(zhǔn)的，不應(yīng)該使用胆胰，除非你別無選擇狞贱。
<input type="file" id="file-uploader" webkitdirectory />
拖放上傳
主要的 JS 如下：
const dropZone = document.getElementById('drop-zone')
const content = document.getElementById('content')
dropZone.addEventListener('dragover', event => {
event.stopPropagation()
event.preventDefault()
event.dataTransfer.dropEffect = 'copy'
})
dropZone.addEventListener('drop', event => {
// 獲取文件
const files = event.dataTransfer.files
// ..
})
用對象處理文件
使用 URL.createObjectURL() 方法從文件創(chuàng)建一個唯一的 URL。使用 URL.revokeObjectURL() 方法釋放它蜀涨。
DOM 和
URL.createObjectURL()和URL.revokeObjectURL()方法允許您創(chuàng)建簡單的 URL 字符串瞎嬉，可用于引用任何可以使用 DOM 文件對象引用的數(shù)據(jù)，包括用戶計算機上的本地文件厚柳。
示例：
<div>
<h1>使用 Object URL</h1>
<input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" >
<div id="image-grid"></div>
</div>
const fileUploader = document.getElementById('file-uploader')
const reader = new FileReader()
const imageGrid = document.getElementById('image-grid')
fileUploader.addEventListener('change', (event) => {
const files = event.target.files
const file = files[0]
const img = document.createElement('img')
imageGrid.appendChild(img)
img.src = URL.createObjectURL(file)
img.alt = file.name
})
