Ajax异步上传图片

如果是常规的异步提交表单数据，拼接成json上传即可，可以使用$post()的快捷方法，但是文件是对象，json就不行了。

先看FormData对象：

1. 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2. 异步上传文件。
   显然本次上传文件案例要使用FromData对象了。

我的前端代码是这样的：

        <div>
            <label >头像</label>
            <input type="file"  name="tou_xiang" id="tou_xiang">
            上传头像
            </input>
        </div>

目的很单纯，就是上传图片（文件）。关于JS，直接看代码：

var formData = new FormData();
// 获取第文件的内容
formData.append("tou_xiang", $('#tou_xiang').get(0).files[0]);

            $.ajax({
                url: '/user/edit',
                processData: false,  // 这个必须为false，不转换的信息
                contentType: false, // 这个必须为false，不指定发送信息的编码类型
                data: formData,
                type: "POST",
                success: function (data) {
                	// 你自己的回调方法
                }
            });

来看一下两个为关键参数 processData&contentType，jQuery的文档解释是这样的：

processData:(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
contentType:(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）

使用上面的方式是可以上传图片的，如果你仍然不能上传图片，就要排查其他原因了。另外注意，$.post()的方式是不可以上传图片的，原因很简单，还是要看文档：
看到data的描述是映射或者字符串值，开篇就提到了，文件是对象，所以post方法不能用喽。