标签 无刷新上传 下的文章

[整合]头像上传

国庆过去了,skidu终于不负自己滴期望又玩过去了T_T
不过之前预告的东东好歹还是要放出来才好的。
嗯,下面进入正题

实现目标:仿 Flash 用户头像上传。
准备工作 -- 需要用到的插件or知识:




- 阅读剩余部分 -

使用iframe无刷新上传[整理]

又是一篇整理文章,skidu的一贯风格是想到什么说什么,啊哈哈~
好吧,进入正文
这次需要实现的功能是:

通过使用iframe提交form表单来实现文件的无刷新上传。
嗯,当然,这个也可以用来当做普通的无刷新表单提交。

这个功能skidu的具体使用场景

选择完文件确定后直接在后台上传文件然后弹窗显示出头像编辑器
最后完成头像上传流程

实现的大致原理是使用iframe来提交上传的头像文件,这样就能在iframe中直接显示上传完毕后程序需要显示的页面内容。控制好这个iframe的显示样式等,就可以实现“无刷新”式的操作流程。

嗯,虽然这个功能已经有很多插件可以实现了,不过这里还是写写我的实现方式吧。



- 阅读剩余部分 -

一些关于上传按钮的事

在网上溜达的时候经常看见那种点击一下“上传”按钮然后就弹出文件上传框,选择文件后立即上传的效果
但是这个大家应该都知道正常的上传框是个神马样式。。

<input type="file" ... />

在这次公司项目中也遇到了这个问题,最后从同事那里得到的答案:
写一个“上传”按钮的样式,通过调整这个按钮的位置,让它和上传按钮完全重合,然后设置上传按钮透明度为0即可。

先上图,制作完成的最终效果:





- 阅读剩余部分 -