您好,登錄后才能下訂單哦!
小編給大家分享一下HTML文件上傳技巧有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
1. 單文件上傳
我們可以將input 類型指定為file,以在Web應(yīng)用程序中使用文件上傳功能。
<input type="file" id="file-uploader">
input filte 提供按鈕上傳一個(gè)或多個(gè)文件。默認(rèn)情況下,它使用操作系統(tǒng)的本機(jī)文件瀏覽器上傳單個(gè)文件。成功上傳后,F(xiàn)ile API 使得可以使用簡單的 JS 代碼讀取File對(duì)象。要讀取File對(duì)象,我們需要監(jiān)聽 change事件。
首先,通過id獲取文件上傳的實(shí)例:
const fileUploader = document.getElementById('file-uploader');
然后添加一個(gè)change 事件偵聽器,以在上傳完成后讀取文件對(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ù)信息。
如果大家看到這里,有點(diǎn)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/rNLOyRm
2. 多文件上傳
如果我們想上傳多個(gè)文件,需要在標(biāo)簽上添加 multiple 屬性:
<input type="file" id="file-uploader" multiple />
現(xiàn)在,我們可以上傳多個(gè)文件了,以前面事例為基礎(chǔ),選擇多個(gè)文件上傳后,觀察一下控制臺(tái)的變化:
如果大家看到這里,有點(diǎn)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/MWeamYp
3.了解文件元數(shù)據(jù)
每當(dāng)我們上傳文件時(shí),F(xiàn)ile對(duì)象都有元數(shù)據(jù)信息,例如file name,size,last update time,type 等等。這些信息對(duì)于進(jìn)一步的驗(yàn)證和特殊處理很有用。
const fileUploader = document.getElementById('file-uploader'); // 聽更 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é)果:
如果大家看到這里,有點(diǎn)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/gOMaRJv
4.了解 accept 屬性
我們可以使用accept屬性來限制要上載的文件的類型,如果只想上傳的文件格式是 .jpg,.png 時(shí),可以這么做:
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
在上面的代碼中,只能選擇后綴是.jpg和.png的文件。
如果大家看到這里,有點(diǎn)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/OJXymRP
5. 管理文件內(nèi)容
成功上傳文件后顯示文件內(nèi)容,站在用戶的角度上,如果上傳之后,沒有一個(gè)預(yù)覽的,就很奇怪也不體貼。
我們可以使用FileReader對(duì)象將文件轉(zhuǎn)換為二進(jìn)制字符串。然后添加load 事件偵聽器,以在成功上傳文件時(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; }); });
如果大家看到這里,有點(diǎn)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/zYBvdjZ
6.驗(yàn)證文件大小
如果用戶上傳圖片過大,為了不讓服務(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 = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`; } else { msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`; } feedback.innerHTML = msg; });
如果大家看到這里,有點(diǎn)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/pobjMKv
7. 顯示文件上傳進(jìn)度
更好的用戶體驗(yàn)是讓用戶知道文件上傳進(jìn)度,前面我們用過了FileReader以及讀取和加載文件的事件。
const reader = new FileReader();
FileReader還有一個(gè)progress 事件,表示當(dāng)前上傳進(jìn)度,配合HTML5的progress標(biāo)簽,我們來模擬一下文件的上傳進(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;
}
});
如果大家看到這里,有點(diǎn)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/eYzpwYj
8. 怎么上傳目錄上傳?
我們可以上傳整個(gè)目錄嗎?嗯,這是可能的,但有一些限制。有一個(gè)叫做webkitdirectory的非標(biāo)準(zhǔn)屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳),它允許我們上傳整個(gè)目錄。
目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳,具體可以看下百度云盤的網(wǎng)頁版的上傳按鈕,在火狐下就支持按照文件進(jìn)行上傳,而在谷歌和Edge下,就會(huì)給用戶提供一個(gè)下拉,讓用戶選擇是根據(jù)文件進(jìn)行上傳還是根據(jù)文件夾進(jìn)行上傳。
<input type="file" id="file-uploader" webkitdirectory />
用戶必須需要確認(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)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/dyXYRKp
9. 拖拽上傳
不支持文件上傳的拖拽就有點(diǎn) low 了,不是嗎?我們來看看如何通過幾個(gè)簡單的步驟實(shí)現(xiàn)這一點(diǎn)。
首先,創(chuàng)建一個(gè)拖放區(qū)域和一個(gè)可選的區(qū)域來顯示上傳的文件內(nèi)容。
<div id="container"> <h2>Drag & Drop an Image</h2> <div id="drop-zone"> DROP HERE </div> <div id="content"> Your image to appear here.. </div> </div>
通過它們各自的ID獲取dropzone和content 區(qū)域。
const dropZone = document.getElementById('drop-zone'); const content = document.getElementById('content');
添加一個(gè)dragover 事件處理程序,以顯示將要復(fù)制的內(nèi)容的效果:
dropZone.addEventListener('dragover', event => {
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
});
接下來,我們需要一個(gè)drop事件監(jiān)聽器來處理。
dropZone.addEventListener('drop', event => { // Get the files const files = event.dataTransfer.files; });
如果大家看到這里,有點(diǎn)激動(dòng),想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/ExyVoXN
10. 使用objectURL處理文件
有一個(gè)特殊的方法叫做URL.createobjecturl(),用于從文件中創(chuàng)建唯一的URL。還可以使用URL.revokeObjectURL()方法來釋放它。
URL.revokeObjectURL() 靜態(tài)方法用來釋放一個(gè)之前已經(jīng)存在的、通過調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象。當(dāng)你結(jié)束使用某個(gè) URL 對(duì)象之后,應(yīng)該通過調(diào)用這個(gè)方法來讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對(duì)這個(gè)文件的引用了。
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; });
以上是“HTML文件上傳技巧有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。