更改上传文件的样式<input type="file>

来源：互联网发布：淘宝处罚考试虚假交易编辑：程序博客网时间：2024/05/18 00:21

很多人肯定都遇到过关于那个样式只有个浏览按钮的那个上传控件了吧，我也不喜欢啊，因为项目不允许它长那难看，好吧，我采用Js把它巧妙的隐藏伪装了一下，变成了下面的样式，你看还可以不，嘻嘻

浏览就变成了从目录中选择，大家看到的那个文本框其实也不是原有的那个了呢，请看代码吧

这是那个表单

<div class="si_form">    <dl>      <dt style="margin-bottom:10px;">客户端设置</dt>      <form action="upload" method="post"  enctype="MULTIPART/FORM-DATA" >      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="si_app">  <tr>            <td width="9%"><img src="../static/images/u59.png" width="44" height="40" /></td>            <td width="16%" align="center">Windows版</td>            <td><div class="app_bor" id="div_Test">ghfgjfhjf</div></td>            <td align="left"><div class="file-box">            <input type='button' class="app_btn" value='从目录中选择' />       <input type="file" name="windows" class="app_file" id="fileField" size="28" onchange="showText(this)" />           </div> </td>                      </tr>  <tr>    <td><img src="../static/images/u63.png" width="44" height="47" /></td>    <td align="center">Android</td>    <td><div class="app_bor" id="div_Test1">ghfgjfhjf</div></td>     <td align="left"><div class="file-box">            <input type='button' class="app_btn" value='从目录中选择' />       <input type="file" name="Android" class="app_file" id="fileField1" size="28" onchange="showText1(this)" />           </div> </td>  </tr>  <tr>    <td><img src="../static/images/u61.png" width="48" height="47" /></td>    <td align="center">Mac版</td>   <td><div class="app_bor" id="div_Test2">ghfgjfhjf</div></td>     <td align="left"><div class="file-box">            <input type='button' class="app_btn" value='从目录中选择' />       <input type="file" name="Mac" class="app_file" id="fileField2" size="28" onchange="showText2(this)" />           </div> </td>  </tr>  </table>    </dl>   <div class="form_but"><input type="submit" value="保存设置"/></div>   </form>  </div>

下面是JS

<SCRIPT LANGUAGE="JavaScript"><!--function reAsk(sStr){    return confirm(sStr);}function getFileName(o){    var pos=o.value.lastIndexOf("\\");    return o.value.substring(pos+1);//文件名    }function GetFileExt(o){    return o.value.replace(/.+\./,"");}function showText(o){document.getElementById("div_Test").innerHTML=o.value.substring(o.value.lastIndexOf("\\")+1);}function showText1(o){document.getElementById("div_Test1").innerHTML=o.value.substring(o.value.lastIndexOf("\\")+1);}function showText2(o){document.getElementById("div_Test2").innerHTML=o.value.substring(o.value.lastIndexOf("\\")+1);}function openBrowse(){ var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false; if(ie){ document.getElementById("file").click(); document.getElementById("filename").value=document.getElementById("file").value;}else{var a=document.createEvent("MouseEvents");//FF的处理 a.initEvent("click", true, true);  document.getElementById("file").dispatchEvent(a); } } //--></SCRIPT>

好吧，就这样了，还有Css设置，大家自己弄弄吧

0 0