jQuery实现图片上传预览效果功能完整实例攻略

在网页开发中，图片上传是一个经常用到的功能。为了方便用户预览刚上传的图片，我们可以使用jQuery实现图片上传预览效果。以下是具体实现步骤：

1. HTML结构

首先，我们需要在HTML中添加一个input元素，并设置type为file，以实现用户上传图片的功能。

<input type="file" id="fileInput">

同时，我们需要在HTML中设置一个div元素，用于显示上传的图片。

<div id="imgPreview">
  <img id="preview" src="">
</div>

2. jQuery实现

给input元素绑定change事件，实现当用户选择了要上传的文件时，上传的图片会自动显示在预览区。

$(document).ready(function() {
  $("#fileInput").change(function() {
    var objUrl = getObjectURL(this.files[0]); //获取文件路径
    if (objUrl) {
      $("#preview").attr("src", objUrl); //将图片路径赋值给img元素
    }
  });
});

function getObjectURL(file) {
  var url = null;
  if (window.createObjectURL != undefined) { //URL.createObjectURL()方法只有Chrome和FireFox支持
    url = window.createObjectURL(file);
  } else if (window.URL != undefined) {
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(file);
  }
  return url;
}

当用户上传的文件不是图片时，我们需要用另一张图片替代原本的预览图，以提醒用户上传文件格式不正确。

$(document).ready(function() {
  $("#fileInput").change(function() {
    var file = this.files[0];
    var objUrl = getObjectURL(file);
    if (objUrl) {
      $("#preview").attr("src", objUrl);
    } else { //替换为提示图片
      $("#preview").attr("src", "warning.jpg");
    }
  });
});

3. 完整示例

在这里，我们提供两个示例以展示jQuery实现图片上传预览效果的完整流程。

示例一：只能上传图片文件，其他文件上传会提示用户，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery实现图片上传预览效果</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="imgPreview">
    <img id="preview" src="">
  </div>
  <script>
    $(document).ready(function() {
      $("#fileInput").change(function() {
        var file = this.files[0];
        if (file.type.indexOf("image") === 0) { //判断是否为图片类型
          var objUrl = getObjectURL(file);
          if (objUrl) {
            $("#preview").attr("src", objUrl);
          }
        } else { //提示用户上传文件类型不正确
          alert("请上传图片文件！");
        }
      });
    });
    function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }
  </script>
</body>
</html>

示例二：上传任意类型的文件，但不是图片文件的上传会使用预设的图片替代原本的预览图，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery实现图片上传预览效果</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="imgPreview">
    <img id="preview" src="">
  </div>
  <script>
    $(document).ready(function() {
      $("#fileInput").change(function() {
        var file = this.files[0];
        var objUrl = getObjectURL(file);
        if (objUrl) {
          $("#preview").attr("src", objUrl);
        } else { //上传非图片文件时使用预设的图片替代原本的预览图
          $("#preview").attr("src", "warning.jpg");
        }
      });
    });
    function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }
  </script>
</body>
</html>