JavaScript 实现图片上传预览功能：从本地文件到页面展示-html教程-PHP中文网

JavaScript 实现图片上传预览功能：从本地文件到页面展示

DDD

发布： 2025-10-08 09:58:01

原创

279人浏览过

javascript 实现图片上传预览功能：从本地文件到页面展示

本文旨在提供一个清晰、简洁的 JavaScript 教程，指导开发者如何实现图片上传预览功能。通过监听 input 元素的文件选择事件，使用 FileReader 对象读取图片数据，并将其动态展示在页面上，无需后端支持即可完成本地预览，同时解决了常见的问题。

实现图片上传预览的核心步骤

实现图片上传预览的核心在于利用 FileReader 对象将用户选择的本地图片文件读取为 Data URL，然后将该 Data URL 设置为 <img> 标签的 src 属性，从而实现图片的即时预览。以下是详细步骤和代码示例：

1. HTML 结构：

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

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

<input type='file' id="imageInput" accept="image/*" onchange="previewImage(this);" />
<img id="preview" src="#" alt="预览图片" style="width:150px; height:200px; display:none;" />

登录后复制

type="file": 指定输入类型为文件选择。
id="imageInput": 为 input 元素设置一个唯一的 ID，方便 JavaScript 代码获取。
accept="image/*": 限制用户只能选择图片文件。
onchange="previewImage(this);": 当用户选择文件后，触发 previewImage 函数，并将当前 input 元素作为参数传递。
id="preview": 为 img 元素设置一个唯一的 ID，方便 JavaScript 代码获取。
src="#": 初始状态下，src 属性为空，避免显示默认图片。
alt="预览图片": 为图片添加 alt 属性，提供语义化信息。
style="width:150px; height:200px; display:none;": 设置图片初始尺寸和隐藏状态。

2. JavaScript 代码：

接下来，编写 JavaScript 代码来实现图片预览功能。

Cutout老照片上色

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

查看详情

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

    reader.onload = function(e) {
      $('#preview')
        .attr('src', e.target.result)
        .width(150)
        .height(200)
        .css('display', 'block'); // 显示图片
    };

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

登录后复制

previewImage(input): 定义一个名为 previewImage 的函数，接收 input 元素作为参数。
if (input.files && input.files[0]): 检查 input 元素是否有选择文件，且选择了至少一个文件。
var reader = new FileReader();: 创建一个 FileReader 对象，用于读取文件内容。
reader.onload = function(e) { ... }: 定义一个回调函数，当文件读取完成后执行。
- e.target.result: 包含读取到的 Data URL。
- $('#preview').attr('src', e.target.result): 将 Data URL 设置为 <img> 元素的 src 属性，从而显示图片。
- .width(150).height(200): 设置预览图片的宽度和高度。
- .css('display', 'block'): 显示图片，如果初始状态是隐藏的。
reader.readAsDataURL(input.files[0]): 使用 readAsDataURL 方法读取文件内容，将其转换为 Data URL。

3. 引入 jQuery (可选):

上述代码使用了 jQuery 库来简化 DOM 操作。如果你还没有引入 jQuery，需要在 HTML 文件中添加以下代码：

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

登录后复制

完整示例代码：

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

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

        reader.readAsDataURL(input.files[0]);
      }
    }
  </script>
</head>
<body>
  <input type='file' id="imageInput" accept="image/*" onchange="previewImage(this);" />
  <img id="preview" src="#" alt="预览图片" style="width:150px; height:200px; display:none;" />
</body>
</html>

登录后复制

注意事项：