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

最新推荐文章于 2023-11-17 16:06:30 发布

浅浅小水沟

最新推荐文章于 2023-11-17 16:06:30 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： html js upload 文件上传

本文链接：https://blog.csdn.net/r0a0n0/article/details/36890141

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

很多人肯定都遇到过关于那个样式只有个浏览按钮的那个上传控件了吧，我也不喜欢啊，因为项目不允许它长那难看，好吧，我采用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" οnchange="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" οnchange="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" οnchange="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设置，大家自己弄弄吧