详细介绍：网站背景更换功能

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})`。
- 这样即使刷新页面，背景图片仍然不会丢失。