1、页面上放个隐藏的
<input type= “file” />
2、然后加上一个文本input(type=”text”)和一个按钮input(type=”button”)
3、点按钮的时候调用
<input type=file />
的click选择文件
4、在
<input type=file />
的onchange事件中把其值显示在文本input中
5、注意把文本input设置成只读的,防止出错
例1:
<form name=formen> <input type="file" name="picpath" id="picpath" style="display:none" onChange="document.formen.path.value=this.value"> <input name="path" readonly> <input type="button" value="Browse" onclick="document.formen.picpath.click()"> </form>
例2:
<style>
input {
border: 1px solid green;
}
div {
width: 300px;
position: relative;
}
p {
float: left
}
.file {
position: absolute;
top: 20px;
right: 300px; +
top: 0; +
right: 73px;
width: 0px;
height: 20px;
filter: alpha(opacity = 0);
-moz-opacity: 0;
opacity: 0;
}
#txt {
height: 20px;
margin: 1px
}
#ii {
width: 70px;
height: 20px;
margin-top: 2px;
border: none;
}
</style>
<div>
<form method="post" action="" enctype="multipart/form-data">
<p>
<input type="text" id="txt" name="txt" />
</p>
<p>
<input id="ii" type="image"
src="uploads/200702/05_125319_index_search_02.gif" value="选择" />
</p>
<p>
<input type="file" onchange="txt.value=this.value" class="file" />
</p>
</form>
</div>