一些关于上传按钮的事

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

<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就不占篇幅了,如果后面有机会我再整理这部分吧:)

标签: 上传, 上传按钮, 无刷新上传

已有 9 条评论

  1. [...] 上传按钮的一些优化方案(可选) [...]

  2. nono

    我来试试邮件功能

    1. skidu

      很好使吧?

  3. 啊咧,頭像設置麼,話說乃要寫頭像截取的那段js代碼麼 :woo:

    1. skidu

      @kita
      呵呵,那段js我用JCrop还是神马的那个jq插件做了呢,呵呵:)
      不过最近关于parent、top、opener这几个玩意出了不少意外一直木有解决 :yaa:

      1. @skidu
        openen这货是什么? :cahan:

        1. skidu

          @kita
          额。。是window.opener 我不就偷了一下懒少打几个字母嘛 :zz:

          1. skidu

            @kita
            :woo: skidu可没有打错哟~ opener ~~不信你复制出去看看 >_

          2. @skidu
            那已經不是少打幾個字的問題了呢,而是連字都打錯了的說

添加新评论