美文网首页Laravel
Ajax上传图片并预览图片

Ajax上传图片并预览图片

作者: 嘉勇__Lynne | 来源:发表于2019-01-10 10:43 被阅读6次

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

    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

    相关文章

      网友评论

        本文标题:Ajax上传图片并预览图片

        本文链接:https://www.haomeiwen.com/subject/xnsorqtx.html