浏览按钮 – LPC影子技术分享

浏览按钮 – LPC影子技术分享 https://www.mudbest.com 行影不离,忘之却步. Mon, 01 Oct 2012 07:09:55 +0000 zh-Hans hourly 1 https://wordpress.org/?v=7.1 html:file中把浏览按钮变成英文 https://www.mudbest.com/htmlfile%e4%b8%ad%e6%8a%8a%e6%b5%8f%e8%a7%88%e6%8c%89%e9%92%ae%e5%8f%98%e6%88%90%e8%8b%b1%e6%96%87/ Thu, 19 Jul 2012 01:14:02 +0000 http://www.mudbest.com/?p=1136 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>

]]>