jquery 压缩图片后再上传实现

要实现jquery压缩图片后再上传，需要使用HTML5的File API和Canvas API。

首先，使用File API获取用户选择的图片文件，然后使用Canvas API将图片压缩到指定大小。最后，将压缩后的图片转换成base64格式，再将其作为参数上传到服务器。

以下是一个示例代码：

// 获取用户选择的图片文件
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

// 创建一个Image对象
var img = new Image();

// 设置Image对象的src属性，将图片文件转换成base64格式
var reader = new FileReader();
reader.onload = function(event){
    img.src = event.target.result;
};
reader.readAsDataURL(file);

// 压缩图片
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

img.onload = function(){
    // 压缩后的图片宽度
    var maxWidth = 500;
    // 压缩后的图片高度
    var maxHeight = 500;
    // 原始图片的宽度
    var width = img.width;
    // 原始图片的高度
    var height = img.height;

    // 如果原始图片的宽度和高度都小于压缩后的宽度和高度，不需要压缩
    if (width <= maxWidth && height <= maxHeight) {
        // 直接上传原始图片
        upload(file);
        return;
    }

    // 计算压缩后的宽度和高度
    if (width > height) {
        if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
        }
    } else {
        if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
        }
    }

    // 设置canvas的宽度和高度
    canvas.width = width;
    canvas.height = height;

    // 绘制压缩后的图片
    ctx.drawImage(img, 0, 0, width, height);

    // 将压缩后的图片转换成base64格式
    var base64 = canvas.toDataURL('image/jpeg', 0.8);

    // 将base64格式的图片作为参数上传到服务器
    upload(base64);
};

// 上传图片
function upload(data){
    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: {image: data},
        success: function(response){
            console.log(response);
        }
    });
}

注意，上述代码中的upload.php是服务器端处理上传的脚本，需要根据实际情况进行修改。此外，压缩后的图片质量可以通过修改toDataURL()方法的第二个参数来控制，取值范围为0到1，值越小压缩后的图片越小，但质量也越差。