请看下面的攻略：

JavaScript实现预览本地上传图片功能完整示例攻略

概述

在网页中，有时需要用户上传图片，并在上传后立即预览上传的图片。这个功能可以通过JavaScript实现。本文将详细介绍如何使用JavaScript完成图片上传和预览功能。

HTML代码

首先，在HTML代码中，我们需要准备一个表单用于上传图片，以及一个用于预览图片的标签。示例HTML代码如下：

<form>
  <input type="file" id="uploadInput" accept="image/*">
</form>
<img id="previewImg">

我们使用标签来创建一个文件上传控件，同时设置accept属性为image/*，表示只允许上传图片。我们还需要添加一个标签用于预览上传的图片。

JavaScript代码

接下来，我们使用JavaScript代码来实现图片上传和预览功能。完整代码如下：

// 获取上传控件和预览图片标签
var uploadInput = document.getElementById("uploadInput");
var previewImg = document.getElementById("previewImg");

// 监听上传文件事件
uploadInput.addEventListener("change", function() {
  // 如果用户没有选择文件，直接退出
  if (!uploadInput.files || uploadInput.files.length == 0) {
    return;
  }

  // 获取用户选择的文件对象
  var file = uploadInput.files[0];

  // 判断文件类型是否是图片
  if (!/^image\//.test(file.type)) {
    alert("请选择图片文件！");
    return;
  }

  // 创建FileReader对象用于读取文件内容
  var reader = new FileReader();

  // 读取文件完成事件
  reader.addEventListener("load", function() {
    // 设置预览图片的src属性
    previewImg.src = reader.result;
  });

  // 读取文件内容
  reader.readAsDataURL(file);
});

我们首先通过document.getElementById()方法获取上传控件和预览图片标签。接着，我们使用addEventListener()方法添加change事件监听器，监听用户选择文件的事件。当用户选择文件后，我们获取用户选择的文件对象，并判断文件类型是否是图片。如果不是图片，我们提示用户选择图片文件并退出。

如果用户选择的是图片文件，我们创建一个FileReader对象用于读取文件内容。我们监听FileReader对象的load事件，当文件读取完成后，设置预览图片的src属性为读取到的文件内容。最后，我们调用FileReader对象的readAsDataURL()方法开始读取文件内容。

示例说明

示例1：基本的图片上传和预览

在示例1中，我们使用上面的HTML和JavaScript代码来创建一个基本的图片上传和预览功能。用户选择一个图片文件后，页面会立即预览选择的图片。可以使用如下代码来测试：

<!DOCTYPE html>
<html>
<head>
  <title>示例1：基本的图片上传和预览</title>
</head>
<body>
  <form>
    <input type="file" id="uploadInput" accept="image/*">
  </form>
  <img id="previewImg">
  <script>
    // JavaScript代码
  </script>
</body>
</html>

示例2：自定义上传文件按钮

在示例2中，我们使用CSS样式来自定义上传文件按钮的外观，使其更符合网站的风格。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>示例2：自定义上传文件按钮</title>
  <<style>
    /* 自定义上传文件按钮的样式 */
    #uploadBtn {
      display: inline-block;
      padding: 8px 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f7f7f7;
      color: #666;
      cursor: pointer;
    }

    #uploadBtn:hover {
      background-color: #fff;
    }
  </style>
</head>
<body>
  <form>
    <label for="uploadInput" id="uploadBtn">选择图片</label>
    <input type="file" id="uploadInput" accept="image/*" style="display: none;">
  </form>
  <img id="previewImg">
  <script>
    // JavaScript代码
  </script>
</body>
</html>

在该示例中，我们使用标签来创建自定义的上传文件按钮。我们给标签添加了一个id属性，然后在CSS中定义了按钮的样式。接着，我们给标签添加了一个style属性，设置其display属性为none，隐藏上传文件控件。这样用户点击上传文件按钮时，就相当于点击了上传文件控件，然后选择文件并上传。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现预览本地上传图片功能完整示例 - Python技术站

JavaScript实现预览本地上传图片功能完整示例