实现浏览器中选择文件框的新样式

实现思想：

将type="file" 的input框设定为活动的控件，并隐藏，当用户鼠标移动到假的选择文件的button时，真实的input控件已移动到对应位置上，此时的点击事件实际是在隐藏的button上，最后将真实input的框中的值赋予给假input框中即可。

实现code:

**.html:

     <div > <input class="input"  type="text" id="input_false" /></div>

     <div id="button" οnmοusemοve="beginDrag(this,event)" οnmοuseοut="up()">Browser</div>

     <div><input type="file" id="input_real" οnchange="input_false.value='    '+this.value" size="1"/></div>

**.css

    .input_false{float:left;}

    .input_real{position:absolute; filter:alpha(opacity=0);-moz-opacity:0;opacity:0}//此处为将控件input_real设为透明度为0的兼容性写法

     #button{float:left;cursor:pointer}

**.js

   var isEE, isFF, flag;

     function beginDrag(obj, event){

            var event = event || window.event;

            flag = obj;

            document.onmousemove = move;

            document.onmouseup = up;

            if(isFF) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

      }

    function move(event){

            var event = event || window.event;

            var left = event.clientX -55 +"px";

             var top = event.clientY - 85 +"px";

            $("#input_real").css({'left':left,'top':top});

}

      function up(){

            document.onmousemove = null;

            document.onmouseup = null;

            if(isFF)  window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}