[整合]头像上传
国庆过去了,skidu终于不负自己滴期望又玩过去了T_T
不过之前预告的东东好歹还是要放出来才好的。
嗯,下面进入正题
实现目标:仿 Flash 用户头像上传。
准备工作 -- 需要用到的插件or知识:
- JQuery 嗯,skidu的JS玩的一般,还是钟爱JQuery
- JCrop 这是一个JQuery插件,用于在指定图像上生成选区的
- 基于iframe实现无刷新上传的方法
- 上传按钮的一些优化方案(可选)
国庆过去了,skidu终于不负自己滴期望又玩过去了T_T
不过之前预告的东东好歹还是要放出来才好的。
嗯,下面进入正题
实现目标:仿 Flash 用户头像上传。
准备工作 -- 需要用到的插件or知识:
又是一篇整理文章,skidu的一贯风格是想到什么说什么,啊哈哈~
好吧,进入正文
这次需要实现的功能是:
通过使用iframe提交form表单来实现文件的无刷新上传。
嗯,当然,这个也可以用来当做普通的无刷新表单提交。
这个功能skidu的具体使用场景
选择完文件确定后直接在后台上传文件然后弹窗显示出头像编辑器
最后完成头像上传流程
实现的大致原理是使用iframe来提交上传的头像文件,这样就能在iframe中直接显示上传完毕后程序需要显示的页面内容。控制好这个iframe的显示样式等,就可以实现“无刷新”式的操作流程。
嗯,虽然这个功能已经有很多插件可以实现了,不过这里还是写写我的实现方式吧。
在网上溜达的时候经常看见那种点击一下“上传”按钮然后就弹出文件上传框,选择文件后立即上传的效果
但是这个大家应该都知道正常的上传框是个神马样式。。
<input type="file" ... />
在这次公司项目中也遇到了这个问题,最后从同事那里得到的答案:
写一个“上传”按钮的样式,通过调整这个按钮的位置,让它和上传按钮完全重合,然后设置上传按钮透明度为0即可。
因为工作上的需要,skidu最近这几周都在折腾瀑布流这玩意。
截止到本日志发布日期,主要功能已基本实现,整理一下实现过程以及其中遇到的一些问题吧:)
最终目的是实现瀑布流+无限拖拽的页面效果
先上局部效果图:
新项目中涉及到“真实姓名”一栏的填写,好吧,skidu稍微蛋疼了一下,折腾了一条更蛋疼的正则出来