修改选择文件按钮，变成自己设置的样式

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>

效果：

　　

转载于:https://www.cnblogs.com/GumpYan/p/7601751.html