让浏览器背景变美了，只需轻松一拖！

2023-12-18 12:28:43

何曾几时，我们发现拖放图片到浏览器并预览这个需求，在不知不觉中涌现在脑子里。也许，某种程度上这是个奇怪的想法，但却不是一个不合理的需求。这篇文章，我将带着你，一步一步实现这个有趣的设想。

首先，我们需要一些布局准备：

一个 h3，写文字“拖拽图片到虚线内”
给 body 加边框，用来显示上传后的图片
默认 body 没有高度，因此边框没有高度，由于 document 会设置 body 的最小高度，为避免出现滚动条，我们需要修改body的高度，可以设为 min-height 或 height 即可

然后，我们需要实现一些基本的 JavaScript 功能：

通过事件监听，监听 body 元素的 drop 事件
在 drop 事件中，我们通过 event.dataTransfer.files 获取上传的文件
使用 FileReader 将文件读取为 base64 格式
将读取到的 base64 格式图片设置为 body 的背景图

以下是如何实现这些功能的示例代码：

// 监听 body 元素的 drop 事件
body.addEventListener('drop', (event) => {
  // 阻止浏览器默认行为
  event.preventDefault();
  
  // 获取上传的文件
  const files = event.dataTransfer.files;
  
  // 使用 FileReader 将文件读取为 base64 格式
  const reader = new FileReader();
  reader.onload = (event) => {
    // 将读取到的 base64 格式图片设置为 body 的背景图
    body.style.backgroundImage = `url(${event.target.result})`;
  };
  
  // 读取文件
  reader.readAsDataURL(files[0]);
});