java 极速上传控件,运用css 美化 上传控件 file 技巧

效果图：

主要的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 代码：

readonly="readonly" value="请选择上传到图片" οnclick="uploadFile()"/>

value="浏览" οnclick="uploadFile()" />

js 实现代码：

function uploadFile(){ //相当于file文件点击

document.getElementById("file").click();

}

function changfileText(){

//将真正的file的value值赋予虚拟的文本框中供前台显示

document.getElementById("fileText").value=document.getElementById("file").value;

}