一些关于上传按钮的事
在网上溜达的时候经常看见那种点击一下“上传”按钮然后就弹出文件上传框,选择文件后立即上传的效果
但是这个大家应该都知道正常的上传框是个神马样式。。
<input type="file" ... />
在这次公司项目中也遇到了这个问题,最后从同事那里得到的答案:
写一个“上传”按钮的样式,通过调整这个按钮的位置,让它和上传按钮完全重合,然后设置上传按钮透明度为0即可。
先上图,制作完成的最终效果:
嗯,为了看得更清楚,这里我去掉这个input的透明度,让大家看看二者的实际排列状况吧:
到这里,skidu遇到了第一个难题:
·上图中蓝色框中的那个类似文本输入框的东东是表单自带样式,无法去掉,长度也无法控制
·红色框中的“上传”按钮倒是可以调整高度,但是依然无法调整宽度
在很长一段时间里,skidu只能勉强做一个宽度和默认“上传”按钮一样的图标来达到我需要的效果,如下图所示:
这样就产生了一个问题:
·某用户很神,鼠标总是能精准的在正确的区域点击,于是每次都能正常呼出文件选择器
·某用户很悲催,老爱点四边,于是每次都无法呼出文件选择器。。
后来skidu实在忍不住了,用firebug查看了点点网相关位置的源码,去掉透明度之后我发现了一个狠YD的现象:他们的这个上传按钮都是跟随鼠标移动的,于是不论你在哪里点击,都能成功!
嗯,有了方法,接下来的事就好解决了,直接上JQuery吧~
$("#avatar_upload").mousemove(function(e){
$("#upload_bar").css({
"top" :(e.pageY - 5) + "px",
"left":( e.pageX - 180 ) + "px"
});
});
其中:avatar_uplaod为我自己写的“上传”按钮
upload_bar为上传表单
好了,问题解决,适合各类奇葩用户,点吧! ~(≧▽≦)/~
有关无刷新上传。。网上已经很多解决方法了。。这里skidu就不占篇幅了,如果后面有机会我再整理这部分吧:)
[...] 上传按钮的一些优化方案(可选) [...]
我来试试邮件功能
很好使吧?
啊咧,頭像設置麼,話說乃要寫頭像截取的那段js代碼麼 :woo:
@kita
呵呵,那段js我用JCrop还是神马的那个jq插件做了呢,呵呵:)
不过最近关于parent、top、opener这几个玩意出了不少意外一直木有解决 :yaa:
@skidu
openen这货是什么? :cahan:
@kita
额。。是window.opener 我不就偷了一下懒少打几个字母嘛 :zz:
@kita
:woo: skidu可没有打错哟~ opener ~~不信你复制出去看看 >_
@skidu
那已經不是少打幾個字的問題了呢,而是連字都打錯了的說