整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本文已經(jīng)過(guò)原作者 Tapas Adhikary 授權(quán)翻譯
上傳文件功能可以說(shuō)是項(xiàng)目經(jīng)常出現(xiàn)的需求。從在社交媒體上上傳照片到在求職網(wǎng)站上發(fā)布簡(jiǎn)歷，文件上傳無(wú)處不在。在本文中，我們將討論 HTML文件上傳支持的10種用法，希望對(duì)你有用。
我們可以將input 類(lèi)型指定為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 使得可以使用簡(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ù)信息。
如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/rNLOyRm
如果我們想上傳多個(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
每當(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é)果：
如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv
我們可以使用accept屬性來(lái)限制要上載的文件的類(lèi)型，如果只想上傳的文件格式是 .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
成功上傳文件后顯示文件內(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;
});
});
如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ
如果用戶上傳圖片過(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 = `<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
更好的用戶體驗(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;
}
});
如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj
我們可以上傳整個(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)行上傳。
<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
不支持文件上傳的拖拽就有點(diǎn) low 了，不是嗎?我們來(lái)看看如何通過(guò)幾個(gè)簡(jiǎn)單的步驟實(shí)現(xiàn)這一點(diǎn)。
首先，創(chuàng)建一個(gè)拖放區(qū)域和一個(gè)可選的區(qū)域來(lái)顯示上傳的文件內(nèi)容。
<div id="container">
<h1>Drag & Drop an Image</h1>
<div id="drop-zone">
DROP HERE
</div>
<div id="content">
Your image to appear here..
</div>
</div>
通過(guò)它們各自的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';
});
接下來(lái)，我們需要一個(gè)drop事件監(jiān)聽(tīng)器來(lái)處理。
dropZone.addEventListener('drop', event => {
// Get the files
const files = event.dataTransfer.files;
});
如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN
有一個(gè)特殊的方法叫做URL.createobjecturl()，用于從文件中創(chuàng)建唯一的URL。還可以使用URL.revokeObjectURL()方法來(lái)釋放它。
URL.revokeObjectURL() 靜態(tài)方法用來(lái)釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象。當(dāng)你結(jié)束使用某個(gè) URL 對(duì)象之后，應(yīng)該通過(guò)調(diào)用這個(gè)方法來(lái)讓瀏覽器知道不用在內(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;
});
如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN
無(wú)論何時(shí)，如果你還想學(xué)習(xí)本文涉及的一些知識(shí)，你可以在這里嘗試。
https://html-file-upload.netlify.app/
天我們要來(lái)談?wù)勔粋€(gè)前端面試中經(jīng)常出現(xiàn)的問(wèn)題：如何實(shí)現(xiàn)上傳圖片并存儲(chǔ)到服務(wù)器？這個(gè)問(wèn)題聽(tīng)起來(lái)好像很復(fù)雜，但其實(shí)只要掌握了基本的HTML、JavaScript和一點(diǎn)后端知識(shí)，就能輕松搞定！
首先，我們需要一個(gè)HTML表單來(lái)讓用戶選擇并上傳圖片。這個(gè)表單需要包含一個(gè)<input type="file">元素，讓用戶可以選擇文件。然后，我們還需要一個(gè)提交按鈕，讓用戶可以提交表單。
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="imageUpload" name="image">
<button type="submit">上傳圖片</button>
</form>
接下來(lái)，我們需要用JavaScript來(lái)監(jiān)聽(tīng)表單的提交事件，并阻止表單的默認(rèn)提交行為。然后，我們可以獲取用戶選擇的文件，并創(chuàng)建一個(gè)FormData對(duì)象來(lái)存儲(chǔ)這個(gè)文件。最后，我們用fetch API或者axios等庫(kù)來(lái)發(fā)送一個(gè)POST請(qǐng)求到服務(wù)器，把文件傳給服務(wù)器。
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData();
const imageFile = document.getElementById('imageUpload').files[0];
formData.append('image', imageFile);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
});
在上面的代碼中，我們假設(shè)服務(wù)器的API路徑是/api/upload，你需要根據(jù)實(shí)際情況來(lái)修改這個(gè)路徑。另外，我們還假設(shè)服務(wù)器會(huì)返回一個(gè)JSON響應(yīng)，包含了上傳結(jié)果的信息。當(dāng)然，這也取決于你的后端實(shí)現(xiàn)。
好了，前端的工作我們就完成了。接下來(lái)，我們來(lái)看看服務(wù)器是怎么處理這個(gè)上傳的圖片的。
一般來(lái)說(shuō)，服務(wù)器會(huì)接收到一個(gè)包含文件的POST請(qǐng)求，然后把這個(gè)文件保存到服務(wù)器的某個(gè)地方，比如一個(gè)文件系統(tǒng)或者一個(gè)云存儲(chǔ)服務(wù)。這個(gè)過(guò)程的具體實(shí)現(xiàn)會(huì)依賴(lài)于你使用的后端框架和存儲(chǔ)服務(wù)。
不過(guò)，有一點(diǎn)需要注意的是，為了安全起見(jiàn)，你應(yīng)該在服務(wù)器端對(duì)上傳的文件進(jìn)行一些驗(yàn)證和過(guò)濾，比如檢查文件的類(lèi)型、大小等，防止惡意文件或者過(guò)大的文件上傳到服務(wù)器。
總的來(lái)說(shuō)，上傳圖片并存儲(chǔ)到服務(wù)器這個(gè)功能雖然聽(tīng)起來(lái)很復(fù)雜，但其實(shí)只要掌握了基本的HTML、JavaScript和一點(diǎn)后端知識(shí)，就能輕松搞定。當(dāng)然，這個(gè)過(guò)程還有很多細(xì)節(jié)和優(yōu)化點(diǎn)可以探討，比如如何顯示上傳進(jìn)度、如何處理上傳失敗等等。但無(wú)論如何，只要你敢于嘗試和挑戰(zhàn)，就一定能成為一名優(yōu)秀的前端工程師！
.表單上傳
最傳統(tǒng)的圖片上傳方式是form表單上傳，使用form表單的input[type=”file”]控件，打開(kāi)系統(tǒng)的文件選擇對(duì)話框，從而達(dá)到選擇文件并上傳的目的。
form表單上傳
表單上傳需要注意以下幾點(diǎn)：
(1).提供form表單，method必須是post。
(2).form表單的enctype必須是multipart/form-data。
enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。默認(rèn)地，表單數(shù)據(jù)會(huì)編碼為 "application/x-www-form-urlencoded"。就是說(shuō)，在發(fā)送到服務(wù)器之前，所有字符都會(huì)進(jìn)行編碼。HTML表單如何打包數(shù)據(jù)文件是由enctype這個(gè)屬性決定的。enctype有以下幾種取值：
application/x-www-form-urlencoded：在發(fā)送前編碼所有字符(默認(rèn))(空格被編碼為’+’，特殊字符被編碼為ASCII十六進(jìn)制字符)。
multipart/form-data：不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)，必須使用該值。
text/plain：空格轉(zhuǎn)換為 “+” 加號(hào)，但不對(duì)特殊字符編碼。
默認(rèn)enctype=application/x-www-form-urlencoded，所以表單的內(nèi)容會(huì)按URL規(guī)則編碼，然后根據(jù)表單的提交方法：
method=’get’ 編碼后的表單內(nèi)容附加在請(qǐng)求連接后，
method=’post’ 編碼后的表單內(nèi)容作為post請(qǐng)求的正文內(nèi)容。
(3).提供input type="file"上傳輸入域。
瀏覽器請(qǐng)求體如下：
請(qǐng)求體
2.ajax上傳
ajax和FormData可實(shí)現(xiàn)頁(yè)面無(wú)刷新的文件上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的
FormData接口。通過(guò)FormData對(duì)象可以更靈活方便的發(fā)送表單數(shù)據(jù)，因?yàn)榭梢元?dú)立于表單使用。如果你把表單的編碼類(lèi)型設(shè)置為multipart/form-data ，則通過(guò)FormData傳輸?shù)臄?shù)據(jù)格式和表單通過(guò)submit()方法傳輸?shù)臄?shù)據(jù)格式相同。
ajax無(wú)刷新上傳
Ajax無(wú)刷新上傳的方式，本質(zhì)上與表單上傳無(wú)異，只是把表單里的內(nèi)容提出來(lái)采用ajax提交，并且由前端決定請(qǐng)求結(jié)果回傳后的展示結(jié)果。
3.各類(lèi)插件上傳
當(dāng)上傳的需求要求可預(yù)覽、顯示上傳進(jìn)度、中斷上傳過(guò)程、大文件分片上傳等等，這時(shí)傳統(tǒng)的表單上傳很難實(shí)現(xiàn)這些功能，我們可以借助現(xiàn)有插件完成。
如百度上傳插件Web Uploader、jQuery圖片預(yù)覽插件imgPreview 、拖拽上傳與圖像預(yù)覽插件Dropzone.js等等，大家可根據(jù)項(xiàng)目實(shí)際需求選擇適合的插件。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
