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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 菊花的梦 花香一路 你的清香丰富了我的生活 若看到你,我内心无比欢欣 白天黑夜处处都有你的气息 门虚掩着,室内外都...
    花香一路阅读 2,299评论 2 6
  • 2018年6月27日 星期三 晴 今天周三,又到了抢驻校名单的日子了。确定爸爸下周有空后,孩子兴奋地催...
    美妙宝贝阅读 1,326评论 0 1
  • 6月17日20:45~6月19日16:00的张家口之行,虽说不上完美吧,但也还算愉快,但这其中的种种滋味,你可能不...
    盈水展千华阅读 1,072评论 0 0