为了账号安全,请及时绑定邮箱和手机立即绑定

上传头像,实时显示,是怎么实现的?

/ 猿问

上传头像,实时显示,是怎么实现的?

红旗渠0_0 2017-08-18 15:23:48

AJAX是个神奇而且牛逼的东西,前几天我想换换我的慕课网的头像,于是我就发现了一件事情:

 用户选择文件 ---> 传送到服务器 --->  服务器管理存储位置和存储时间 --->  一切就绪,将图片地址发送给客户端 --->   客户端等待服务器返回数据 --->  数据返回,使用data,操作DOM --->   完成头像展示,确认修改,将特定参数传回服务器 --->   服务器接受到这个参数,将图片无限期延长储存时间,如果没有,取消的时候,也有参数,传回服务器,销毁图片;

    存cookie是为了验证图片的名字是不是一致吗?

    

http://img1.sycdn.imooc.com/599695010001e2d713910194.jpg

http://img1.sycdn.imooc.com/5996950200014cb110890631.jpg



【而且啊,我还发现了一件大事】、

就是这个啊,同一张图片我每次点击选择,将同一个文件的名字改掉,AJAX就会重新工作一遍;

http://img1.sycdn.imooc.com/599695030001b9da14570730.jpg


【我的问题是】

如果让你们来实现这种用户点击上传一张图片,立马就显示他本地的图片,在不用插件的前提下,你们会如何实现?原理和基本思路,感谢!!!

http://img1.sycdn.imooc.com/599695d900012e4211930610.jpg

查看完整描述

3 回答

已采纳
?
慕妹1347366

base64

查看完整回答
2 反对 回复 2017-08-18
?
ExiaGo

根本就不要插件,前两天我就做了一个这样的,原理就是通过 input 的 file 方式,获取文件的 src ,创建出 img ,赋值给图片 src ,然后再用个 div 装起来,再接着 append 到你想显示的位置。

查看完整回答
反对 回复 2017-08-19
?
精慕门9254224

你用的是百度的ueditor ,用ajax 将文件传到服务器,再把图片的url 放到img 的src 中就可以了

查看完整回答
反对 回复 2017-08-18

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信