如何正确添加错误处理到图像上传拖放表单jquery

$(document).ready(function() {
  // 在这里编写代码
});

$('#image-upload-form').on('change', '#image-input', function() {
  // 在这里编写代码
});

var file = this.files[0];

if (!file.type.startsWith('image/')) {
  // 文件类型不是图像类型，执行错误处理
  alert('请选择一个图像文件！');
  return;
}

var maxSize = 2 * 1024 * 1024; // 2MB
if (file.size > maxSize) {
  // 文件大小超过限制，执行错误处理
  alert('图像文件大小不能超过2MB！');
  return;
}

$.ajax({
  url: 'upload.php', // 上传文件的服务器端处理脚本
  type: 'POST',
  data: new FormData($('#image-upload-form')[0]),
  processData: false,
  contentType: false,
  success: function(response) {
    // 上传成功的处理代码
    alert('图像上传成功！');
  },
  error: function(xhr, status, error) {
    // 上传失败的处理代码
    alert('图像上传失败：' + error);
  }
});

$(document).ready(function() {
  $('#image-upload-form').on('change', '#image-input', function() {
    var file = this.files[0];
    
    if (!file.type.startsWith('image/')) {
      alert('请选择一个图像文件！');
      return;
    }
    
    var maxSize = 2 * 1024 * 1024; // 2MB
    if (file.size > maxSize) {
      alert('图像文件大小不能超过2MB！');
      return;
    }
    
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: new FormData($('#image-upload-form')[0]),
      processData: false,
      contentType: false,
      success: function(response) {
        alert('图像上传成功！');
      },
      error: function(xhr, status, error) {
        alert('图像上传失败：' + error);
      }
    });
  });
});