JavaScript 实现图片上传预览功能教程-html教程-PHP中文网

JavaScript 实现图片上传预览功能教程

DDD

发布： 2025-10-08 09:04:28

原创

873人浏览过

javascript 实现图片上传预览功能教程

本教程将介绍如何使用 JavaScript 实现图片上传预览功能，允许用户在选择本地图片后，立即在网页上看到预览效果。我们将提供完整的 HTML 和 JavaScript 代码示例，并解释关键步骤，帮助开发者快速实现该功能。

实现步骤

实现图片上传预览的核心在于使用 FileReader 对象读取本地文件，并将读取到的数据 URL 设置为 <img> 标签的 src 属性。以下是详细步骤：

1. HTML 结构

首先，我们需要一个 <input type="file"> 元素用于选择图片，以及一个 <img> 元素用于显示预览。

立即学习“Java免费学习笔记（深入）”；

<input type='file' id="imageUpload" accept="image/*" onchange="readURL(this);" />
<img id="imagePreview" src="#" alt="预览图片" />

登录后复制

type="file": 指定输入类型为文件选择。
accept="image/*": 限制用户只能选择图片文件。
onchange="readURL(this);": 当用户选择文件后，触发 readURL 函数，并将当前 <input> 元素作为参数传递。
src="#": <img> 标签的初始 src 属性设置为 "#"，表示一个无效的 URL，避免浏览器尝试加载不存在的图片。
alt="预览图片": 为 <img> 标签提供替代文本，当图片无法加载时显示。

2. JavaScript 代码

接下来，我们编写 JavaScript 代码来处理文件选择和预览。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#imagePreview')
        .attr('src', e.target.result)
        .width(150)
        .height(200);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

登录后复制

readURL(input) 函数: 接收 <input type="file"> 元素作为参数。
if (input.files && input.files[0]): 检查是否选择了文件。 input.files 是一个 FileList 对象，包含用户选择的文件。 input.files[0] 表示选择的第一个文件。
var reader = new FileReader();: 创建一个 FileReader 对象，用于读取文件内容。
reader.onload = function (e) { ... }: 定义一个 onload 事件处理函数，当文件读取完成后触发。
- e.target.result: 包含读取到的文件数据，以 data URL 的形式表示。
- $('#imagePreview').attr('src', e.target.result): 使用 jQuery 将 <img> 标签的 src 属性设置为读取到的 data URL，从而显示预览图片。
- .width(150).height(200): 设置预览图片的宽度和高度（可选）。
reader.readAsDataURL(input.files[0]);: 使用 readAsDataURL 方法异步读取文件内容。读取完成后，会触发 onload 事件。

3. 引入 jQuery (如果使用)

上述代码使用了 jQuery 来简化 DOM 操作。如果你没有使用 jQuery，可以使用原生的 JavaScript 代码来实现相同的功能。

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

登录后复制

或者，可以使用原生JavaScript实现：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      document.getElementById('imagePreview').setAttribute('src', e.target.result);
      document.getElementById('imagePreview').setAttribute('width', '150');
      document.getElementById('imagePreview').setAttribute('height', '200');
    };

    reader.readAsDataURL(input.files[0]);
  }
}

登录后复制

4. 完整示例

以下是一个完整的 HTML 示例，包含 HTML 结构和 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
  <title>图片上传预览</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
          $('#imagePreview')
            .attr('src', e.target.result)
            .width(150)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
      }
    }
  </script>
</head>
<body>
  <input type='file' id="imageUpload" accept="image/*" onchange="readURL(this);" />
  <img id="imagePreview" src="#" alt="预览图片" />
</body>
</html>

登录后复制

注意事项

安全性: 请注意，客户端的图片预览不能替代服务器端的图片验证。仍然需要在服务器端验证上传的图片是否符合要求（例如，文件类型、大小、尺寸等），以确保安全性。
性能: 对于大型图片，读取和显示 data URL 可能会影响性能。可以考虑使用 Canvas API 来缩放图片，然后再显示预览。
浏览器兼容性: FileReader 对象在现代浏览器中得到广泛支持。但为了兼容旧版本浏览器，可能需要使用 polyfill。