jQuery实现图片上传

$('input[type="file"]').change(function(event) {
  var currentTarget = event.currentTarget;
  var currentFile = currentTarget.files[0];
  var fr = new FileReader();
  var img = new Image();
  fr.onload = function() {
    img.src = this.result;
    img.onload = function() {
      var imgData = self.compressWithRatio(img, {
        maxWidth: 780,
        maxHeight: 1560,
        quality: 1
      });
      self.uploadFile(imgData);
    };
  };
  fr.readAsDataURL(currentTarget.files[0]);
});
=====================================
compress: function(img, width, height, quality) {
    // var orient = this.getPhotoOrientation(img);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    if (width > height) {
      canvas.width = height;
      canvas.height = width;
      ctx.save();
      ctx.translate(height / 2, width / 2);
      ctx.rotate(90 * Math.PI / 180);
      ctx.drawImage(img, -width / 2, -height / 2, width, height);
      ctx.restore();
    } else {
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
    }
    // 针对iphone照片自动旋转 兼容处理
    // canvas.width = width;
    // canvas.height = height;
    // if (orient == 6) {
    //     ctx.save();
    //     ctx.translate(width / 2, height / 2);
    //     ctx.rotate(90 * Math.PI / 180);
    //     ctx.drawImage(img, -height / 2, -width / 2, height, width);
    //     ctx.restore();
    // } else {
    //     ctx.drawImage(img, 0, 0, width, height);
    // }

    return canvas.toDataURL('image/jpeg', quality || 0.6);
  },
=====================================
  compressWithRatio: function(img, settings) {
    var maxWidth, maxHeight;
    var w = img.width;
    var h = img.height;
    // 调整宽度
    if ((maxWidth = settings.maxWidth) > 0 && w > maxWidth) {
      h = maxWidth / w * h;
      w = maxWidth;
    }
    // 调整高度
    if ((maxHeight = settings.maxHeight) > 0 && h > maxHeight) {
      w = maxHeight / h * w;
      h = maxHeight;
    }

    return this.compress(img, w, h, settings.quality);
  },

  getPhotoOrientation: function(img) {
    var orient;
    EXIF.getData(img, function() {
      orient = EXIF.getTag(this, 'Orientation');
    });
    return orient;
  },

  uploadFile: function(imgIndex, imgData) {
    var formData = new FormData();
    formData.append('imageData', imgData);
    formData.append('activityId', gactivityId);
    formData.append('mobilePhone', mobilePhone);
    formData.append('imageName', imgIndex);

    $.ajax({
      url: uploadFileUrl,
      type: 'post',
      data: formData,
      processData: false,
      contentType: false,
      dataType: 'json',
      success: function(result) {
        if (result.success) {
          tank.errorTips("保存成功");
        } else {
          tank.errorTips(result.error_msg);
        }
      },
      error: function() {
        tank.errorTips("服务器错误");
      }
    });
  },