Ajax上传图片并预览图片

需求：在做修改头像时候需要用户上传新图片之后能够在页面预览。

1、FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。然后创建一个FormData对象，然后调用它的append()方法来添加字段

2、为什么是$(obj)[0].files[0]，

因为①首先得明白jQuery对象只能使用jQuery对象的属性和方法，JavaScript对象只能使用JavaScript对象的属性和方法；

②files[0]是JavaScript的属性；

③$('xx')是jQuery对象，$('xx')[0]是将jQuery对象：$('xx')转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法；

④我们再看这行代码的背景，HTML5支持multiple属性，即<input type="file">可能会添加multiple属性并赋值：multiple="multiple"，即<input type="file" multiple="multiple">，这样一次性可同时上传多张图片，所以获得一张图片的方法就是：$('xx')[0].files[0]

⑤扩展：

$('xx')[0].files[0].size可获得文件的大小，单位是字节（B），使用$('xx')[0].files[0].size可用于判断文件的大小。

第二点原文链接https://blog.csdn.net/zh123456zh789/article/details/78805178

3、然后交到服务器处理

上传成功之后就把img标签的src给替换掉。

参考链接：https://www.jb51.net/article/148003.htm