简单实现jQuery上传图片显示预览功能

实现jQuery上传图片显示预览功能的过程可以分为以下步骤：

步骤1：HTML结构准备

首先，在HTML中需要创建一个input元素，用于选择图片文件，以及一个img元素，用于显示图片预览效果。这里我们给它们分别添加了id为"fileInput"和"idForImg"，如下所示：

<input type="file" id="fileInput" accept="image/*">
<img id="idForImg" style="display:none;">

步骤2：jQuery实现上传功能和图片预览功能

然后，我们使用jQuery来实现上传功能和图片预览功能。具体方法如下：

$(document).ready(function(){
  //监听文件选择事件
  $('#fileInput').on('change', function(){

      //获取选择的文件
      var file = this.files[0];

      //创建一个文件读取器
      var reader = new FileReader();

      //读取文件完成后执行的回调函数
      reader.onload = function(){
          //将图片设置为预览图
          $('#idForImg').attr('src', reader.result);
          //显示预览图
          $('#idForImg').show();
      }

      //将文件读取为Data URL，即base64编码的字符串
      reader.readAsDataURL(file);

  });
});

上述代码实现的功能如下：

1. 监听input文件选择元素的change事件；
2. 获取文件对象及其相关信息，并通过FileReader对象将其读取为Data URL格式的base64编码字符串；
3. 将读取到的base64编码字符串设置为图片的src属性，从而实现图片预览；
4. 显示图片预览。

示例1：实现多张图片上传预览

有时候我们需要支持用户同时上传多张图片，并一一显示预览。这时候我们可以稍微改进一下以上代码，将其变为支持多图片上传和预览。示例如下：

    <input type="file" multiple id="fileInput" accept="image/*">
    <div id="previewContainer"></div>

$(document).ready(function(){
    //监听文件选择事件
    $('#fileInput').on('change', function(){

        //获取用户选择的所有文件
        var files = this.files;

        //创建一个文件读取器
        var reader;
        //循环遍历用户选择的所有文件
        for(var i=0; i<files.length; i++){
            //创建新的文件读取器
            reader = new FileReader();

            //在匿名函数的作用域中创建一个新的img元素
            (function(img){

                //为当前文件读取器设置一个onload事件处理程序
                reader.onload = function(){
                    //当文件读取完成时将图片的src设置为读取器对象的result属性
                    img.src = reader.result;
                }

                //将当前文件读取为base64 encoded Data URL
                reader.readAsDataURL(files[i]);

            })(document.createElement('img'));

            //将创建的img元素添加到预览容器中
            $(previewContainer).append(img);

        }

    });
});

上述代码实现的功能如下：

1. 监听input文件多选择元素的change事件；
2. 获取用户选择的多个文件对象及其相关信息，并通过FileReader对象将其分别读取为Data URL格式的base64编码字符串；
3. 为每个图片文件创建img元素，在回调函数中设置其src属性，将之前读取到的base64编码字符串赋给其；
4. 将每个图片元素添加到预览容器中以供展示。

示例2：实现文件自动按比例缩放预览

有时候我们需要将上传的图片按照指定比例进行缩放，以适应元素大小。这时我们可以使用Canvas API来实现这一功能。示例如下：

$(document).ready(function(){
    //监听文件选择事件
    $('#fileInput').on('change', function(){

        //获取选择的文件
        var file = this.files[0];

        //创建一个文件读取器
        var reader = new FileReader();

        //读取文件完成后执行的回调函数
        reader.onload = function(){
            //将图片设置为预览图
            var base64Image = reader.result; //base64编码的图片字符串
            var img = new Image();
            img.src = base64Image;
            img.onload = function(){
                //创建canvas元素
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');

                //设置canvas元素的尺寸，与原图比例相同
                var ratio = img.width / img.height;
                var max_height = 400;
                var max_width = 800;
                var w = Math.min(img.width, max_width);
                var h = w / ratio;
                if ( h > max_height ){
                    h = max_height;
                    w = h * ratio;
                }
                canvas.width = w;
                canvas.height = h;

                //使用canvas绘制缩放后的图片
                ctx.drawImage(img, 0, 0, w, h);

                //将canvas转换为base64编码的Data URL
                var previewImage = canvas.toDataURL('image/jpeg');

                //将图片设置为预览图
                $('#idForImg').attr('src', previewImage);
                $('#idForImg').show();
            }
        }

        //将文件读取为Data URL，即base64编码的字符串
        reader.readAsDataURL(file);

    });
});

上述代码实现的功能如下：

1. 监听input文件选择元素的change事件；
2. 获取选择的文件对象及其相关信息，并通过FileReader对象将其读取为Data URL格式的base64编码字符串；
3. 使用Canvas API将base64编码的图片按指定比例进行缩放；
4. 将缩放后的图片转化为新的base64编码的Data URL；
5. 将新的base64编码的图片设置为预览图，并显示。