运用css 美化 上传控件 file 技巧

2019独角兽企业重金招聘Python工程师标准>>>

效果图：

主要的css样式：

.upload_file{   /*上传文本框的样式*/
	background: url(../images/upload_bg.jpg) no-repeat;
	width: 317px;
	height: 18px;
	border-width:0px;
	margin: 5px;
	padding:6px;
	line-height:20px;
	color:#999;
	
}

.upload_button{ /*上传文件的的浏览按钮*/
	background:url(../images/upload_button.jpg) no-repeat;
	width:91px;
	height:29px;
	border-width:0px;
	text-align:center;
	color:#107F66;}

页面的html 代码：  <!--此处为真正的上传控件-->
<input id="file" type="file" value="" onchange="changfileText()" style="display:none;" /> 

<!--虚拟的上传输入框-->
<input id="fileText" type="text" class="upload_file" style="float:left;" size="45" 
            readonly="readonly" value="请选择上传到图片" onclick="uploadFile()"/> 
<!--虚拟的上传浏览按钮-->
<input class="upload_button" style="float:left; margin:5px 0;  _display: inline;" type="button"
             value="浏览" onclick="uploadFile()" />


js 实现代码：

function uploadFile(){ //相当于file文件点击
     document.getElementById("file").click();
      }         
function changfileText(){
    //将真正的file的value值赋予虚拟的文本框中供前台显示
    document.getElementById("fileText").value=document.getElementById("file").value;
      }

转载于:https://my.oschina.net/haopeng/blog/91077