简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
javascript - 如何实现 web 端的头像上传
ringa_lee
ringa_lee 2017-04-11 12:22:53
0
3
557

从用户上传文件开始，到最后存储缩略图，整个头像的剪切、上传流程是怎样的？请以你习惯使用的语言和库为例子。

ringa_lee
ringa_lee

ringa_lee

reply all(3)
刘奇
刘奇2017-04-11 12:24:53 3 floor

如果不考虑兼容 IE 可以用 FileReader API 读取文件 获得文件的 Base-64 值
img 标签 可以直接用 Base64 展示图片
之后可以用一些插件剪裁图片后上传服务器保存

FileReader API 参考文档： https://developer.mozilla.org...
jQuery 剪裁图片插件(支持移动端)： http://www.jq22.com/jquery-in...
Like +0
Add Reply
巴扎黑
巴扎黑2017-04-11 12:24:53 2 floor

菜鸟来答，最近也在做头像上传，选来选去最后用了一个form表单上传插件配合一个原生js写的预览头像功能。预览头像是直接在p里面打开你本地的图片，实际上的文件传给了后端。当然也可以让后端返回给你图片显示在页面上，只是没有那么快了。我也参考了许多上传的插件，比如百度的webuploader，国外的fileuploader，可能是因为比较复杂，虽然功能很强大，出于简便的考虑，还是没有用。
Like +0
Add Reply
小葫芦
小葫芦2017-04-11 12:24:53 1 floor

做这种功能，有两大思路， 第一个是使用php的内置全局变量$_FILE 通过表达的方式提交， 提交到php文件后， 你 要经过层层判断才保存， 要不然容易被攻击， 。 第二种是 你用JavaScript。把这个图片变成base64 流文件的形容上传过去，php接受到这个流文件之后， 在还原下这个图片就可以了， 然后自己保存，

当然这种常用的功能，google上肯定有很多插件， 我知道的 一个uploadify这个插件，还不错， 支持h5的flash两种方式， 有免费版的
Like +1
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！