ajax上传文件是json数据

在现代Web应用程序中，AJAX（Asynchronous JavaScript and XML）已经成为不可或缺的组件。AJAX已经赋予了Web开发人员使用JavaScript与服务器进行异步通信的能力，以实现动态Web应用程序及用户友好的用户界面。

其中，AJAX上传文件和将文件作为JSON数据发送给服务器已成为众多Web应用程序开发人员的热门话题。下面，我们将一起来探讨如何使用AJAX上传文件并将其作为JSON数据发送给服务器。

// 在这个例子中，我们将使用jQuery和 FormData 来实现AJAX文件上传和JSON数据发送
$('form').on('submit',function(e) {
  e.preventDefault();

  var formData = new FormData(this);

  $.ajax({
    url: '/upload',type: 'POST',data: formData,success: function(data) {
      console.log('success',data);
    },error: function(jqXHR,textStatus,errorThrown) {
      console.error('error',errorThrown);
    },processData: false,contentType: false
  });
});

在这个例子中，我们使用jQuery将表单数据序列化为 FormData 对象，并发送给服务器。注意，我们必须将 processData 和 contentType 设置为 false，以便 FormData 对象被正确处理。

现在，我们来看一下如何将上传的文件作为JSON数据发送给服务器：

// 假设我们上传的文件是一张图片
$('#img-upload').on('change',function(e) {
  var file = e.target.files[0];
  var img = new Image();
  
  // 创建一个读取文件的FileReader对象
  var reader = new FileReader();
  reader.onload = function(e) {
    img.src = e.target.result;
    img.onload = function() {
      // 将上传的文件数据转化为JSON字符串
      var data = JSON.stringify({
        width: img.width,height: img.height,dataUrl: img.src
      });

      // 向服务器发送JSON数据
      $.ajax({
        url: '/upload',data: data,success: function(data) {
          console.log('success',data);
        },errorThrown) {
          console.error('error',errorThrown);
        },contentType: 'application/json'
      });
    };
  };
  reader.readAsDataURL(file);
});

在这个例子中，我们上传的文件是一张图片。首先，我们使用FileReader读取文件，并将其转换为 dataURL。接着，我们将文件数据转换为JSON字符串，并将其发送到服务器。请注意，在本例中，我们将 contentType 设置为 'application/json'，而不是 false。