84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
从用户上传文件开始，到最后存储缩略图，整个头像的剪切、上传流程是怎样的？请以你习惯使用的语言和库为例子。
ringa_lee
如果不考虑兼容 IE 可以用 FileReader API 读取文件 获得文件的 Base-64 值img 标签 可以直接用 Base64 展示图片之后可以用一些插件剪裁图片后上传服务器保存
IE
FileReader API
Base-64
img
Base64
FileReader API 参考文档： https://developer.mozilla.org...jQuery 剪裁图片插件(支持移动端)： http://www.jq22.com/jquery-in...
FileReader API 参考文档：
jQuery 剪裁图片插件(支持移动端)：
菜鸟来答，最近也在做头像上传，选来选去最后用了一个form表单上传插件配合一个原生js写的预览头像功能。预览头像是直接在p里面打开你本地的图片，实际上的文件传给了后端。当然也可以让后端返回给你图片显示在页面上，只是没有那么快了。我也参考了许多上传的插件，比如百度的webuploader，国外的fileuploader，可能是因为比较复杂，虽然功能很强大，出于简便的考虑，还是没有用。
做这种功能，有两大思路， 第一个是使用php的内置全局变量$_FILE 通过表达的方式提交， 提交到php文件后， 你 要经过层层判断才保存， 要不然容易被攻击， 。 第二种是 你用JavaScript。把这个图片变成base64 流文件的形容上传过去，php接受到这个流文件之后， 在还原下这个图片就可以了， 然后自己保存，
当然这种常用的功能，google上肯定有很多插件， 我知道的 一个uploadify这个插件，还不错， 支持h5的flash两种方式， 有免费版的
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
如果不考虑兼容
IE可以用FileReader API读取文件 获得文件的Base-64值img标签 可以直接用Base64展示图片之后可以用一些插件剪裁图片后上传服务器保存
FileReader API 参考文档：https://developer.mozilla.org...jQuery 剪裁图片插件(支持移动端)：http://www.jq22.com/jquery-in...菜鸟来答，最近也在做头像上传，选来选去最后用了一个form表单上传插件配合一个原生js写的预览头像功能。预览头像是直接在p里面打开你本地的图片，实际上的文件传给了后端。当然也可以让后端返回给你图片显示在页面上，只是没有那么快了。我也参考了许多上传的插件，比如百度的webuploader，国外的fileuploader，可能是因为比较复杂，虽然功能很强大，出于简便的考虑，还是没有用。
做这种功能，有两大思路， 第一个是使用php的内置全局变量$_FILE 通过表达的方式提交， 提交到php文件后， 你 要经过层层判断才保存， 要不然容易被攻击， 。 第二种是 你用JavaScript。把这个图片变成base64 流文件的形容上传过去，php接受到这个流文件之后， 在还原下这个图片就可以了， 然后自己保存，
当然这种常用的功能，google上肯定有很多插件， 我知道的 一个uploadify这个插件，还不错， 支持h5的flash两种方式， 有免费版的