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="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>
效果: