博客

使用jQuery在上传前预览图片

  • Post category:jquery

使用jQuery在上传前预览图片的完整攻略可以分为以下几个步骤：

  1. HTML结构

首先，在HTML结构中需要添加一个用于显示图片的元素，如下所示：

<div>
  <input type="file" id="uploadImage" accept="image/*">
  <br>
  <img id="preview" src="placeholder.png" alt="image preview" width="200">
</div>

其中，<input>标签用于上传图片，accept="image/*"表示只接受图片类型的文件，<img>标签用于显示选中的图片，默认情况下显示一个占位符图片。

  1. jQuery代码

接下来，使用jQuery来实现上传前预览图片的功能。可以使用FileReader对象来读取上传的图片文件，并将其显示在页面上。代码如下：

$(function() {
  // 监听文件选择框的改变
  $('#uploadImage').on('change', function() {
    // 获取上传的文件
    var file = this.files[0];

    // 创建 FileReader 对象
    var reader = new FileReader();

    // 文件读取完成后执行的回调函数
    reader.onload = function(e) {
      // 将读取到的图片数据赋值给 img 元素显示出来
      $('#preview').attr('src', e.target.result);
    };

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

首先，使用$('#uploadImage').on('change', function() {})来监听文件选择框的改变事件。当文件选择框发生变化时，执行回调函数内的代码。

在回调函数内部，首先获取上传的文件，即this.files[0]。然后创建一个FileReader对象，它可以读取文件内容，并将文件内容以URL的形式保存在result属性中。

接着，指定reader.onload回调函数，即文件读取完成后执行的操作。在回调函数内部，将读取到的图片数据赋值给<img>元素的src属性，从而实现预览图片的效果。需要注意的是，在<img>元素中设置了一个width属性，代表上传的图片在页面上显示的宽度，可以根据需求进行调整。

  1. 示例说明

下面给出两个示例，分别演示了如何在不同情境下使用jQuery在上传前预览图片。

3.1 示例一：单图上传页面

假设我们现在有一个单图上传页面，用户需要选择一个图片文件并上传。这时，我们可以在上传前预览图片，让用户确认选择的图片是否正确。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>单图上传页面</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div>
    <input type="file" id="uploadImage" accept="image/*">
    <br>
    <img id="preview" src="placeholder.png" alt="image preview" width="200">
  </div>
  <script>
    $(function() {
      // 监听文件选择框的改变
      $('#uploadImage').on('change', function() {
        // 获取上传的文件
        var file = this.files[0];

        // 创建 FileReader 对象
        var reader = new FileReader();

        // 文件读取完成后执行的回调函数
        reader.onload = function(e) {
          // 将读取到的图片数据赋值给 img 元素显示出来
          $('#preview').attr('src', e.target.result);
        };

        // 读取文件
        reader.readAsDataURL(file);
      });
    });
  </script>
</body>
</html>

用户在选择图片文件后，页面会自动显示该图片的缩略图。如果用户确认选择的图片正确，点击上传按钮即可将图片上传至服务器。

3.2 示例二：多图上传页面

假设我们现在有一个多图上传页面，用户可以选择多个图片文件并上传。这时，我们可以在上传前预览所有选择的图片，让用户确认选择的图片是否正确。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>多图上传页面</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div>
    <input type="file" id="uploadImages" accept="image/*" multiple>
    <br>
    <div id="previewContainer"></div>
  </div>
  <script>
    $(function() {
      // 监听文件选择框的改变
      $('#uploadImages').on('change', function() {
        // 获取上传的文件列表
        var files = this.files;

        // 将文件列表转换为数组
        var filesArray = Array.from(files);

        // 创建 FileReader 对象
        var reader = new FileReader();

        // 处理文件列表中的每个文件
        filesArray.forEach(function(file) {
          // 读取文件
          reader.readAsDataURL(file);

          // 文件读取完成后执行的回调函数
          reader.onload = function(e) {
            // 创建 img 元素并显示图片
            var img = $('<img>').attr('src', e.target.result).attr('width', '200');
            $('#previewContainer').append(img);
          };
        });
      });
    });
  </script>
</body>
</html>

用户在选择图片文件后，页面会自动显示所有选择的图片的缩略图。用户可以拖拽缩略图的位置，对多个图片的位置进行排版和调整。如果用户确认选择的图片正确，点击上传按钮即可将所有图片上传至服务器。

Tags: