修改選擇文件按鈕，變成自己設置的樣式

1.所達到的效果：

2.思想：

（1）將選擇文件的按鈕與自己寫的按鈕重合；此處關鍵在於fileop的float:left;和left:40px;

（2）將選擇文件的按鈕設置透明化。

<style type="text/css">
        *{
            margin:0;
            padding:0;
            font-size:14px;
        }
        .fileop{
            width:105px;
            height:30px;
            opacity:0;/*透明化  */
            float:left;
            z-index:3;
            position:absolute;
            left:40px;/*將原來的選擇文件的按鈕設置透明化，在不斷的移動，使之與按鈕重合  */
        }
         .xzwjbtn{
             float:left;
             border-radius:3px;
             height:25px;
             line-height:36px;
             margin-left:10px;
             background-color:#3379d8;
             cursor:pointer;
             align:center;
             width:100px;
         } 
    </style>

 

<div class="selfile" style="margin-top:30px;margin-left:31px;">
      <input type="file" id="fileop" name="file" multiple="true" class="fileop" />
      <a id="xzwjbtn" href="javascript:void(0)" class="easyui-linkbutton xzwjbtn">選擇文件</a>
      <input type="text" id="filete" name="filename" class="easyui-validatebox xzwj" style="width:180px;height:25px;margin-left:10px;padding-left:5px;" readonly="true"/>
  </div>

 一定要進行以下操作，才能把選擇的文件填入到后面的輸入框中

<script type="text/javascript">
	$(document).ready(function(){
		$("#fileop").change(function(){
			var selname=$(this).val();
			var str="fakepath";
			var hhstr="";
			if(selname.indexOf(str)>=0){
				hhstr=selname.substring(12,selname.length);
				$("#filete").val(hhstr);
			}else{
				$("#filete").val(selname);
			}
		});
	});
	</script>

效果：