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

下面是详细讲解jquery实现图片上传前本地预览功能的完整攻略，其中包含两个示例。

示例1：使用FileReader实现图片本地预览

1. HTML结构

首先，在页面中需要添加一个图片上传按钮和一个预览区域：

<input type="file" id="img-file">
<div id="img-preview"></div>

2. JS代码

接下来，我们通过监听图片上传按钮的change事件，获取到上传的图片文件对象，使用FileReader读取图片文件，并将读取到的图片数据展示在预览区域中。

$('#img-file').change(function(){
    var file = this.files[0]; // 获取上传的图片文件对象
    var reader = new FileReader(); // 创建FileReader对象
    reader.readAsDataURL(file); // 读取图片文件，得到相应的Base64编码的字符串
    reader.onload = function(){
        // 将读取到的图片数据展示在预览区域中
        var img = '<img src="' + this.result + '" alt="preview">';
        $('#img-preview').html(img);
    }
});

示例2：使用FormData和ajax实现图片上传和本地预览

1. HTML结构

同样需要添加一个图片上传按钮和一个预览区域：

<input type="file" id="img-file">
<div id="img-preview"></div>

2. JS代码

和示例1不同的是，在这里我们需要使用ajax将图片上传到服务器。为了同时实现图片本地预览和上传，我们需要将图片预览的逻辑放在ajax发送之前。

首先获取上传的图片文件对象，创建FormData对象，将图片文件对象添加到FormData中，并调用ajax发送FormData。
在ajax的beforeSend回调函数中，使用URL.createObjectURL方法生成URL，将URL作为预览图片的src属性值显示在预览区域中。
在ajax的success回调函数中可以获取到上传成功后的响应数据，我们可以在这里做一些统一的处理，比如显示上传成功的提示信息等。

$('#img-file').change(function(){
    var file = this.files[0]; // 获取上传的图片文件对象
    var formData = new FormData(); // 创建FormData对象
    formData.append('file', file); // 将图片文件对象添加到FormData中
    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        contentType: false, // 不设置contentType
        processData: false, // 不处理数据
        beforeSend: function(){
            // 显示预览图片
            var url = URL.createObjectURL(file);
            var img = '<img src="' + url + '" alt="preview">';
            $('#img-preview').html(img);
        },
        success: function(data){
            // 处理上传成功后的响应数据，比如显示上传成功的提示信息等
        }
    });
});

以上就是使用jquery实现图片上传前本地预览功能的完整攻略，通过示例可以更好地理解实现过程。