目錄
1. HTML 部分
2. JavaScript 部分
3. 完整流程
4. 總結
5. 適用場景
本文將介紹如何通過文件上傳實現網站背景圖片的更換。通過使用 JavaScript 和 Axios，我們可以允許用戶上傳圖片文件并將其作為網站的背景圖片。上傳的圖片 URL 會保存在瀏覽器的 localStorage 中，這樣即使刷新頁面，背景圖片仍然可以保持不變。
下面是具體的實現過程以及完整的代碼示例。
1. HTML 部分
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>更換背景圖片</title></head><body><h1>選擇一張圖片更換背景</h1><!-- 上傳圖片選擇框 --><input type="file" class="bg-ipt"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// JavaScript 部分代碼見下文</script></body>
</html>
HTML 解析：
input[type="file"]：這是一個文件選擇框，用戶可以通過該框選擇本地圖片文件。class="bg-ipt"：我們通過該類名在 JavaScript 中獲取元素，以便給它綁定事件監聽器。
2. JavaScript 部分
// 監聽文件選擇框的change事件
document.querySelector(".bg-ipt").addEventListener("change", (e) => {// 1. 選擇圖片上傳，設置 body 背景console.log(e.target.files[0]);// 創建 FormData 對象，封裝圖片文件const fd = new FormData();fd.append("img", e.target.files[0]);// 發送 POST 請求到服務器，上傳圖片axios({url: "http://hmajax.itheima.net/api/uploadimg", // 圖片上傳的 API 地址method: "post",data: fd, // 上傳的文件數據}).then((result) => {// 服務器返回結果console.log(result);// 從返回的數據中獲取圖片 URLconst imgUrl = result.data.data.url;// 設置頁面背景圖片為上傳的圖片document.body.style.backgroundImage = `url(${imgUrl})`;// 2. 上傳成功時，"保存"圖片 URL 到 localStorage 中localStorage.setItem("bgImg", imgUrl);}).catch((error) => {// 錯誤處理console.error('圖片上傳失敗:', error);});
});// 3. 網頁運行時，獲取存儲的背景圖片 URL 并應用
const bgUrl = localStorage.getItem("bgImg");
if (bgUrl) {document.body.style.backgroundImage = `url(${bgUrl})`;
}
JavaScript 解析：
-
監聽文件選擇框的變化：
document.querySelector(".bg-ipt").addEventListener("change", (e) => { ... })：當用戶選擇文件時，觸發change事件。e.target.files[0]獲取用戶選擇的文件。
-
創建
FormData對象：const fd = new FormData();：通過FormData對象，封裝要上傳的文件。fd.append("img", e.target.files[0]);：將文件添加到FormData中，鍵名為'img'，對應服務器上傳接口的字段名。
-
發送 POST 請求上傳圖片：
- 使用
axios發送POST請求，上傳圖片至指定 API（本示例中為http://hmajax.itheima.net/api/uploadimg）。 - 請求成功后，服務器返回圖片的 URL，我們將其用作頁面的背景圖片：
document.body.style.backgroundImage =url(${imgUrl})`。
- 使用
-
保存圖片 URL 到
localStorage：- 上傳成功后，使用
localStorage.setItem("bgImg", imgUrl)將圖片的 URL 存儲在本地存儲中，以便頁面刷新時仍能使用相同的背景圖片。
- 上傳成功后，使用
-
獲取并應用背景圖片：
- 頁面加載時，通過
localStorage.getItem("bgImg")獲取存儲的背景圖片 URL，并將其應用到頁面背景：document.body.style.backgroundImage =url(${bgUrl})`。 - 這樣即使刷新頁面，背景圖片仍然不會丟失。
- 頁面加載時，通過
3. 完整流程
- 用戶點擊文件選擇框并選擇一張圖片。
- JavaScript 通過
FormData創建上傳請求，使用Axios向服務器發送圖片文件。 - 服務器返回圖片的 URL，JavaScript 將此 URL 設置為頁面的背景。
- 圖片 URL 會被保存到
localStorage中，確保頁面刷新后背景圖片依然存在。 - 當頁面加載時，JavaScript 會從
localStorage中讀取背景圖片的 URL 并重新應用。
4. 總結
這個示例展示了如何使用 JavaScript 和 Axios 實現動態背景更換功能，并且在用戶刷新頁面時保持背景不變。通過 localStorage 我們能保存用戶的選擇，使得背景圖片可以在會話中持續有效。這個功能適用于個人網站、博客、或者任何需要自定義頁面外觀的應用。
5. 適用場景
- 個人網站：允許用戶自定義背景圖片，使其更加個性化。
- 博客平臺：用戶可以上傳并設置背景圖片，提升視覺體驗。
- 管理后臺：管理員可以根據需求上傳和更改系統背景，提升管理界面的可視化效果。
通過上面的代碼，你可以很容易地在你的網站上實現動態背景更換功能。
![[ VS Code 插件開發 ] 使用 Task ( 任務 ) 代替 createTerminal (終端) 來執行命令](http://pic.xiahunao.cn/[ VS Code 插件開發 ] 使用 Task ( 任務 ) 代替 createTerminal (終端) 來執行命令)
