jQuery+HTML5实现图片上传前预览效果

下面我将详细讲解“jQuery+HTML5实现图片上传前预览效果”的完整攻略。

一、准备工作

首先，需要在HTML文档中添加一个图片上传的表单元素和一个用于预览图片的图片容器，例如：

<form>
  <input type="file" id="fileInput">
</form>
<img id="previewImage" src="" alt="预览图片">

二、jQuery实现图片上传前预览

接下来，我们使用jQuery和HTML5的FileReader API实现图片上传前预览效果。具体实现步骤如下：

1. 获取文件输入框的值，即选择的文件

var selectedFile = $("#fileInput").prop("files")[0];

1. 判断选中的文件是否为图片类型

var fileType = selectedFile["type"];
if(fileType.indexOf("image") == -1){
  alert("请上传图片类型文件");
  return false;
}

1. 使用FileReader API读取文件内容，并显示预览图片

var reader = new FileReader();
reader.onload = function(e){
    $("#previewImage").attr("src", e.target.result);
}
reader.readAsDataURL(selectedFile);

完整的示例代码如下：

<form>
  <input type="file" id="fileInput">
</form>
<img id="previewImage" src="" alt="预览图片">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function(){
    $("#fileInput").on("change", function(){
      var selectedFile = $("#fileInput").prop("files")[0];
      var fileType = selectedFile["type"];
      if(fileType.indexOf("image") == -1){
        alert("请上传图片类型文件");
        return false;
      }
      var reader = new FileReader();
      reader.onload = function(e){
        $("#previewImage").attr("src", e.target.result);
      }
      reader.readAsDataURL(selectedFile);
    });
  });
</script>

三、示例说明

示例一：单图上传

如上文所示的示例，适用于单图上传的情况。用户选择一张图片后，会立即在页面上显示预览效果。

示例二：多图上传

如果需要进行多图上传，可以将上述的单图上传代码进行修改，改为循环读取并预览多张图片。具体实现代码如下：

<form>
  <input type="file" id="fileInput" multiple>
</form>
<div id="previewBox"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function(){
    $("#fileInput").on("change", function(){
      var fileArr = [];
      for(var i=0;i<this.files.length;i++){
        var fileType = this.files[i]["type"];
        if(fileType.indexOf("image") == -1){
          alert("请上传图片类型文件");
          return false;
        }
        fileArr.push(this.files[i]);
        var reader = new FileReader();
        reader.onload = (function(file){
          return function(e){
            var img = '<img src="'+e.target.result+'" alt="预览图片">';
            $("#previewBox").append(img);
          }
        })(this.files[i]);
        reader.readAsDataURL(this.files[i]);
      }
    });
  });
</script>

在该示例中，我们新增了一个用于显示预览图片的DIV容器，并使用循环读取并预览了选择的文件列表。每次选择文件后，都会在预览容器中追加一个新的预览图像元素。