jQuery实现本地预览上传图片功能

下面我就为您详细讲解如何使用jQuery实现本地预览上传图片的功能。

准备工作

在开始使用jQuery实现图片本地上传之前，您需要先准备好以下工作：

• 在html页面中引入jQuery库文件，可以通过CDN或者下载本地文件进行引用。

<!-- CDN 引用  -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 本地文件引用 -->
<script src="jquery.min.js"></script>

• 加载完jQuery库文件之后，需要写入html上传文件的input元素代码，建议使用type="file"类型，且可以设置accept属性实现文件上传格式的限制。

<input type="file" id="image" accept="image/*">

实现方法

在上面完成基本的准备工作之后，就可以开始实现jQuery实现本地预览上传图片的功能了。下面我将为您示例两种不同实现方式。

方法一：使用FileReader对象实现

这是最常用的实现方式，通过FileReader对象读取图片并将读取的内容转换为DataURL，并将DataURL赋值给可以预览的image元素实现图片的本地预览。

// 获取文件选择框元素
var input = $('#image');

// 监听文件选择
input.on('change', function(e) {
  // 获取文件对象
  var file = e.target.files[0];

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

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

  // 文件读取完成后执行
  reader.onload = function(e) {
    // 获取读取的DataURL
    var dataURL = e.target.result;

    // 预览图片
    $('img').attr('src', dataURL);
  };
});

方法二：使用FormData与XMLHttpRequest对象实现

此方法相比方法一，多了一步对文件内容的处理，可以实现更为灵活精细的文件上传操作，比如可以实现进度条、上传至服务器等操作。

// 获取文件选择框元素
var input = $('#image');

// 监听文件选择
input.on('change', function(e) {
  // 获取文件对象
  var file = e.target.files[0];

  // 创建FormData对象，将文件内容存放到FormData对象中
  var formData = new FormData();
  formData.append('file', file);

  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 设置请求地址及请求方式
  xhr.open('POST', '/upload', true);

  // 文件上传状态发生改变时执行
  xhr.onreadystatechange = function(e) {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 文件上传成功，获取服务器返回的数据
      var data = xhr.responseText;

      // 预览图片
      $('img').attr('src', data);
    }
  };

  // 发送请求
  xhr.send(formData);
});

以上两种实现方式都能够较为简单地实现jQuery图片本地预览上传的功能，您可以根据实际需求选择其中一种方式进行实现。希望以上内容能够对您有所帮助！