用过jquery的Ajax的人肯定都知道，Ajax的默认编码方式是”application/x-www-form-urlencoded“，此编码方式只能编码文本类型的数据，因此Ajax发送请求的时候，会把data序列化成 一个个String类型的键值对,此种传输数据的方式能够满足大部分应用场景，然而当传输的数据里有附件的时候，此序列化机制便是我们的绊脚石。Ajax本身的序列化机制的硬伤归其原因在于在html4的时代，没有FileReader接口，在页面里无法读取File（Blob）文件，用document.getElementById(“文件控件的id”).value只能拿到文件的name，因
在本文中，我们将深入探讨如何使用jQuery AJAX实现上传附件的功能，这是HTML5中的一项重要进步。在HTML4时代，由于缺乏FileReader接口，通过Ajax上传文件具有一定的挑战性，因为默认的`application/x-www-form-urlencoded`编码方式仅适用于文本数据。然而，HTML5引入了FormData接口，使得这一过程变得更加简便。
我们需要理解Ajax的默认行为。当使用jQuery的$.ajax()方法时，数据会被序列化成字符串键值对。这种方式对于大多数文本数据是有效的，但当涉及文件（如附件）时，就无法正常工作，因为文件对象无法被转化为这种格式。HTML4时代的限制是，通过`document.getElementById()`获取文件输入元素的value，只能得到文件名，而无法获取文件内容。
然而，HTML5的FormData接口解决了这个问题。通过创建一个新的FormData实例，我们可以将整个表单，包括文件输入字段，封装到一个对象中。例如：
```javascript
var form = new FormData(document.getElementById('form'));
```
接下来，我们使用这个FormData对象作为$.ajax()方法中的data参数。为了确保数据不被jQuery自动序列化，我们需要设置`processData`选项为`false`。同时，由于我们已经有了formData，所以需要设置`contentType`为`false`，避免覆盖表单的`enctype="multipart/form-data"`设置。这允许我们以POST方式提交包含文件的表单数据：
```javascript
$.ajax({
url: "接口地址",
type: "post",
data: form,
cache: false,
processData: false,
contentType: false,
success: function(data) {
alert("操作成功！");
},
error: function(e) {
alert("网络错误，请重试！！");
}
});
```
这里要注意，GET请求通常受限于较小的数据量，所以上传附件必须使用POST请求。如果不设置`processData`为`false`，那么带有文件的表单将无法正确上传，因为jQuery的默认序列化机制不适合处理文件。
总结来说，使用jQuery AJAX上传附件的关键步骤是：
1. 创建一个FormData对象，包含整个表单数据。
2. 设置$.ajax()的`processData`为`false`，避免jQuery对数据进行序列化。
3. 设置`contentType`为`false`，保留表单的`multipart/form-data`编码。
4. 使用POST方式提交请求。
通过这种方式，我们能够借用jQuery AJAX的便利性，实现与传统表单提交类似的文件上传功能，同时保持页面的异步更新，提升了用户体验。这种方法避免了使用专门的文件上传插件，如AjaxFileUpload，简化了开发流程。
