目录

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);
    
    // 从返回的数据中获取图片 URL
    const 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 解析：

  1. 监听文件选择框的变化：

    • document.querySelector(".bg-ipt").addEventListener("change", (e) => { ... })：当用户选择文件时，触发 change 事件。
    • e.target.files[0] 获取用户选择的文件。

  2. 创建 FormData 对象：

    • const fd = new FormData();：通过 FormData 对象，封装要上传的文件。
    • fd.append("img", e.target.files[0]);：将文件添加到 FormData 中，键名为 'img'，对应服务器上传接口的字段名。

  3. 发送 POST 请求上传图片：

    • 使用 axios 发送 POST 请求，上传图片至指定 API（本示例中为 http://hmajax.itheima.net/api/uploadimg）。
    • 请求成功后，服务器返回图片的 URL，我们将其用作页面的背景图片：document.body.style.backgroundImage = url(${imgUrl})`。

  4. 保存图片 URL 到 localStorage：

    • 上传成功后，使用 localStorage.setItem("bgImg", imgUrl) 将图片的 URL 存储在本地存储中，以便页面刷新时仍能使用相同的背景图片。

  5. 获取并应用背景图片：

    • 页面加载时，通过 localStorage.getItem("bgImg") 获取存储的背景图片 URL，并将其应用到页面背景：document.body.style.backgroundImage = url(${bgUrl})`。
    • 这样即使刷新页面，背景图片仍然不会丢失。
3. 完整流程
  1. 用户点击文件选择框并选择一张图片。
  2. JavaScript 通过 FormData 创建上传请求，使用 Axios 向服务器发送图片文件。
  3. 服务器返回图片的 URL，JavaScript 将此 URL 设置为页面的背景。
  4. 图片 URL 会被保存到 localStorage 中，确保页面刷新后背景图片依然存在。
  5. 当页面加载时，JavaScript 会从 localStorage 中读取背景图片的 URL 并重新应用。
4. 总结

这个示例展示了如何使用 JavaScript 和 Axios 实现动态背景更换功能，并且在用户刷新页面时保持背景不变。通过 localStorage 我们能保存用户的选择，使得背景图片可以在会话中持续有效。这个功能适用于个人网站、博客、或者任何需要自定义页面外观的应用。

5. 适用场景
  • 个人网站：允许用户自定义背景图片，使其更加个性化。
  • 博客平台：用户可以上传并设置背景图片，提升视觉体验。
  • 管理后台：管理员可以根据需求上传和更改系统背景，提升管理界面的可视化效果。

通过上面的代码，你可以很容易地在你的网站上实现动态背景更换功能。

# javascript # ajax # 前端 # vscode # html5 # css3 # 前端框架
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

OpenClaw 本地部署完整指南（Windows + Ollama）

本文档基于实际部署经验编写，旨在帮助你在 Windows 系统上从零开始搭建 OpenClaw，并连接本地 Ollama 模型（如 Qwen2.5 或 Qwen3），使其具备完整的智能体能力。文档包含了所有关键步骤以及常见问题的解决方案。

avatar 火山引擎 ADG 社区

OpenClaw 小白安装指南（Windows版）

（类似一个能自动执行任务的AI机器人），不是游戏。API Key只保存在你本地电脑的加密文件里，不会上传到任何地方。访问：https://github.com/miaoxworld/openclaw-manager/releases。: 一键安装脚本会自动安装Node.js 22+，如果失败，手动下载安装：https://nodejs.org/：在PowerShell中，鼠标右键就是粘贴，不需要按

avatar 火山引擎 ADG 社区

飞书 × OpenClaw 接入指南：不用服务器，用长连接把机器人跑起来

这个项目存在的意义，就是把“飞书接 OpenClaw”这件事，整理成一套的配置入口，并把官方文档没覆盖到的坑集中写成排查清单。先说清楚它的角色：OpenClaw 现在已经内置官方飞书插件 @openclaw/feishu，功能更完整、维护也更及时。，说明飞书 + AI 的接入已经走通。另外，仓库也推荐了一个新项目：把 OpenClaw 变成“多 Agent 团队”，用多个 Agent 分工，Sla

avatar 火山引擎 ADG 社区