// prop获取属性的值数据
var files = $("#avatar").prop("files");
//formdata用于拼接表单的数据组合键值对append用于追加
//get放发用于获取set方法用于重新设置,直接打印是没有效果的
var data = new FormData();
data.append("avatar",files[0]);
data.append("uid",g_uid);
$.ajax({
url: '/api/import_user',
type: 'POST',
data,
cache: false, //设置是否第二次是否从缓存中读取
processData: false,//将数据类型序列换成application/x-www-form-urlencoded ,fasle表示关闭
contentType: false,//默认值为application/x-www-form-urlencoded,false表示关闭
success:function(data){
}
});
}
上传文件的数据类型一定要注意不能为application/x-www-form-urlencoded,而必须为multipart/form-data 我们以前是直接写成html,但是我们这里不用如下图方式上传文件,只用ajax方式上传文件。
所以下面我们说一下相关的属性
dataType 表示后台回传的数据,被格式化成怎样的数据
cache 表示是否在第二次发送ajax的时候 优先从缓存中读取
contentType 默认值为application/x-www-form-urlencoded,是发送ajax的数据的格式默认值;我们知道发送给后台的数据,是具备一定的格式,如果我们上传文件,是不能使用这种默认值的;
contentType都是默认的值:application/x-www-form-urlencoded,这种格式的特点就是,name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。如: http://wwwh.baidu.com/q?key=fdsa&lang=zh 这是get , 而 post 请求则是使用请求体,参数不在 url 中,在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。
键值对这样组织在一般的情况下是没有什么问题的,这里说的一般是,不带嵌套类型JSON,也就是 简单的JSON,形如这样:
{
a: 1,
b: 2,
c: 3
}
但是在一些复杂的情况下就有问题了。 例如在 ajax 中你要传一个复杂的 json 对像,也就说是对象嵌数组,数组中包括对象,兄果你这样传:
{
data: {
a: [{
x: 2
}]
}
}
这个复杂对象, application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式(当然也有方案这点可以参考 ) ,你传进去可以发送请求,但是服务端收到数据为空, 因为 ajax 没有办法知道怎样处理这个数据。
这怎么可以呢?
聪明的程序员发现 http 还可以自定义数据类型,于是就定义一种叫 application/json 的类型。这种类型是 text , 我们 ajax 的复杂JSON数据,用 JSON.stringify序列化后,然后发送,在服务器端接到然后用 JSON.parse 进行还原就行了,这样就能处理复杂的对象了。
$.ajax({
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({a: [{b:1, a:1}]})
})
也就是说如果你传复杂的对象过去contentType你可以设置为false 不要这么转换,或者直接json.stringify也是可以的
processData:false 这个属性默认格式也是application/x-www-form-urlencoded 设置成false那么就不会转成这个。