jQuery 预览上传前的图片

在本文中，我们将介绍如何使用jQuery在图片上传之前预览图片。通过这种方式，用户可以在确定上传图片之前，对图片进行预览和确认。

1. HTML和CSS准备工作

首先，我们需要一个HTML表单来接受用户的文件上传，以及一个用于显示预览图片的容器。以下是一个简单的HTML代码示例：

<input type="file" id="upload" accept="image/*">
<div id="imagePreview"></div>

接下来，我们需要一些CSS样式来美化我们的预览容器。以下是一个简单的CSS示例：

#imagePreview {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

2. 使用jQuery实现预览功能

首先，我们需要在HTML中引入jQuery库。你可以使用CDN链接或者下载并引入本地文件。在这个例子中，我们使用CDN链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

接着，我们可以使用以下的jQuery代码实现预览功能：

$(document).ready(function() {
  // 当用户选择文件后
  $("#upload").change(function() {
    var file = this.files[0];
    var reader = new FileReader();

    // 当文件读取完成后
    reader.onload = function(e) {
      $("#imagePreview").css("background-image", "url(" + e.target.result + ")");
    }

    // 开始读取文件
    reader.readAsDataURL(file);
  });
});

上述代码中，我们首先通过change事件监听文件选择框的变化。当用户选择了文件之后，我们创建一个FileReader对象来读取文件。读取完成后，我们将读取到的图片数据URL设置为预览容器的背景图，从而实现图片预览的效果。

3. 完整的示例

下面是一个完整的示例，包括HTML、CSS和jQuery代码：

<!DOCTYPE html>
<html>
<head>
  <title>图片预览</title>
  <style>
    #imagePreview {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <input type="file" id="upload" accept="image/*">
  <div id="imagePreview"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
     $(document).ready(function() {$ ("#upload").change(function() {
        var file = this.files[0];
        var reader = new FileReader();

        reader.onload = function(e) {
          $("#imagePreview").css("background-image", "url(" + e.target.result + ")");
        }

        reader.readAsDataURL(file);
      });
    });
  </script>
</body>
</html>

你可以将以上代码复制到一个HTML文件中并在浏览器中打开，以查看完整的图片预览效果。