使用jQuery在上传前预览图片

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

步骤一：添加HTML结构

<form>
  <input type="file" id="file">
  <img src="" id="preview">
</form>

其中，<input type="file">用于选择本地的图片文件，<img>则用于预览选中的图片。id="file"和id="preview"则用于与jQuery进行绑定。

步骤二：引入jQuery库

在<head>标签中引入jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

步骤三：添加jQuery代码

$(function(){
  // 当文件域内容改变时触发
  $('#file').change(function(){
    // 生成预览图
    var reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload = function(){
      $('#preview').attr('src', this.result);
    };
  });
});

上述代码中，$(function(){})表示当页面加载完成时执行的代码。$('#file')表示获取id="file"的元素。change()则表示当文件域内容改变时触发的事件。this.files[0]表示获取第一个选中的图片。readAsDataURL()则用于读取图片文件，并返回该文件的内容以base64的形式编码。而onload()则是文件读取完成后的回调函数，将base64编码的内容设置为<img>标签的src属性，即可显示预览图。

示例一：基本的图片预览

<!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>
  <form>
    <input type="file" id="file">
    <img src="" id="preview" alt="预览图">
  </form>
  <script>
    $(function(){
      // 当文件域内容改变时触发
      $('#file').change(function(){
        // 生成预览图
        var reader = new FileReader();
        reader.readAsDataURL(this.files[0]);
        reader.onload = function(){
          $('#preview').attr('src', this.result);
        };
      });
    });
  </script>
</body>
</html>

运行上述示例，可以选择一张本地图片后，在页面上看到预览图。

示例二：改进版图片预览（添加判断、限制图片大小、添加非图片类型判断）

<!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>
  <form>
    <p>选择图片：<input type="file" id="file"></p>
    <img src="" id="preview" alt="预览图" style="display:none">
  </form>
  <script>
    $(function(){
      // 当文件域内容改变时触发
      $('#file').change(function(){
        var file = this.files[0];
        var type = file.type;
        // 判断是否为图片
        if(!/\.(jpg|jpeg|png|gif)$/.test(file.name.toLowerCase()) || !/image\/\w+/.test(type)){
          alert('请选择图片！');
          return false;
        }
        // 判断图片大小是否超过1MB
        if(file.size > 1024 * 1024){
          alert('图片大小不能超过1MB！');
          return false;
        }
        // 生成预览图
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
          $('#preview').attr('src', this.result);
          $('#preview').show();
        };
      });
    });
  </script>
</body>
</html>

在以上示例基础上，添加了如下改进：
- 添加了判断非图片类型的代码；
- 添加了限制图片大小不能超过1MB的代码；
- 预览图的<img>标签加上了style="display:none"，在还没有选中任何图片时不显示预览图，只有选中图片后才显示预览图。

运行上述示例，可以选择一张小于1MB的本地图片后，在页面上看到预览图。而如果选择的图片大小超过1MB、或者不是图片类型，则会弹出提示框。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用jQuery在上传前预览图片 - Python技术站