js如何实现点击上传图片并设为模糊背景

实现点击上传图片并设置为模糊背景需要用到HTML、CSS和JavaScript。

1. HTML 部分

首先需要创建一个包含上传按钮和显示图片的 HTML 元素。这可以通过以下代码实现：

<div class="upload-button">
  <input type="file" id="img-upload">
  <label for="img-upload">Upload Image</label>
  <img id="bg-image">
</div>

这个代码片段包含了一个类名为 “upload-button” 的 div 元素，其中包括一个 input 元素和一个 label 元素。当用户点击标签时，浏览器会触发 input 元素的点击事件。在 label 元素中，我们可以设置一个自制图标来取代原生的 input 按钮。最后在 div 中添加一个空 img 元素，以供后续使用上传的图片显示为背景。

2. CSS 部分

为了使上传按钮看起来更好看，我们需要对其进行一些 CSS 样式设置。以下是一个简单的 CSS 样式表：

.upload-button {
  display: inline-block;
}

#img-upload {
  display: none;
}

label[for="img-upload"] {
  display: block;
  width: 150px;
  height: 40px;
  margin: 10px auto;
  background-color: #222;
  color: #fff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
}

label[for="img-upload"]:hover {
  background-color: #555;
}

#bg-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  filter: blur(5px);
  z-index: -1;
}

这里我们给 .upload-button 元素设置了 display: inline-block; 的样式，因为这个元素默认是 block 元素，会独占一行。在#img-upload 元素上设置了 display: none; 样式，为了隐藏其默认显示的文件选择框。接着设置了 label[for="img-upload"] 元素的样式。这个样式会在上传图标上添加一个黑色背景和平移的样式。当用户将鼠标移到按钮上时，将会产生一个hover ，看起来更好看。

3. JavaScript 部分

实现点击上传图片并设为模糊背景，我们需要使用 JavaScript 将上传文件的URL解析为图像URL，稍微处理一下后，将其添加到 <img> 元素的 src 属性上。我们还要重置上传文件的选择，以便下次可以上传不同的文件。

在获得图像 URL 后，我们需要将其设置为背景。这可以通过将 src attribute 的值设置为 CSS 的 background-image 样式来实现。

以下是 JavaScript 部分的代码：

function handleFileSelect(event) {
  const uploadFile = event.target.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(uploadFile);
  reader.onload = function(event) {
    const dataUri = event.target.result;
    const bgImage = document.getElementById('bg-image');
    bgImage.style.backgroundImage = url(${dataUri});
  };
}

const imgUpload = document.getElementById('img-upload');
imgUpload.addEventListener('change', handleFileSelect);

这里定义了一个名为 handleFileSelect() 的事件处理函数，用于将文件转换为 URL，并将其设置为背景图像。 imgUpload 是一个 input 元素，当用户选择文件时，会触发 change 事件，并调用 handleFileSelect() 函数。

最后，我们可以在 CSS 选择器中添加filter: blur(5px); ，使背景图片模糊化。