如何实现 web 端的头像上传

wendzhue
  • 64

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

回复
阅读 8.1k
3 个回答
✓ 已被采纳

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

FileReader API 参考文档: https://developer.mozilla.org...
jQuery 剪裁图片插件(支持移动端): http://www.jq22.com/jquery-in...

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

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

当然这种常用的功能,google上肯定有很多插件, 我知道的 一个uploadify这个插件,还不错, 支持h5的flash两种方式, 有免费版的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏