ajax json 上传文件

随着Web应用程序的发展，越来越多的开发者开始使用Ajax技术来提高用户体验。其中，Ajax通过动态加载数据来避免重新加载整个网页，Json则通过轻量级的文本格式来促进数据交换。而在Web应用程序开发中，上传文件是非常普遍的活动之一。于是，结合Ajax和Json技术，实现了Ajax Json上传文件。

首先，我们需要创建一个包含文件上传表单的HTML页面。表单包括一条File类型的Input的组件，并带有一个Submit按钮，点击它时，表单将数据发送到服务器，启动Ajax上传。

<form action="upload.PHP" method="post" enctype="multipart/form-data">
    <label for="file">请选择要上传的文件:</label>
    <input type="file" id="file" name="file"><br>
    <input type="submit" value="上传">
</form>

然后，我们可以使用JavaScript代码将提交的文件转换为Json格式。为此，我们需要使用FormData API。

var formData = new FormData();
formData.append('file',document.getElementById('file').files[0]);

var xhr = new XMLHttpRequest();
xhr.open('POST','upload.PHP');
xhr.onload = function() {
  console.log(this.responseText);
};
xhr.send(formData);

以上JavaScript代码创建了一个FormData对象，用于将当前页面上选中的文件添加到上传表单中。接下来，在声明XHR对象时
，开启POST请求，并定义完成事件onload。最后，我们将FormData对象发送到PHP服务器的upload.PHP页面。

最后，我们来看看PHP服务器如何处理上传请求并向客户端发送Json响应。在服务器端，我们需要检测上传文件，并将其保存到服务器上。然后，输出包含文件名和结果状态_code（成功或错误）的Json格式字符串。

if (isset($_FILES['file'])) {
   $uploadDir = 'uploads/';
   $uploadFile = $uploadDir . basename($_FILES['file']['name']);

   if (move_uploaded_file($_FILES['file']['tmp_name'],$uploadFile)) {
      $jsonArray = array("fileName"=>basename($_FILES['file']['name']),"code"=>"success");
   } 
   else {
      $jsonArray = array("fileName"=>basename($_FILES['file']['name']),"code"=>"error");
   }

   echo json_encode($jsonArray);
}

使用以上代码，我们可以将Ajax Json上传文件集成到Web应用程序中，实现从客户端向服务器发送文件，并在服务器上保存文件，并使用Json响应数据向客户端提供上传结果。