在做图片上传时，经常需要将file控件做成按钮样式，并能预览刚刚选择的图片（兼容火狐）。
CSS:
<style type="text/css">
.file_input {
opacity:0;
filter:alpha(opacity=0);
width:80px;
height:20px;
font-size:14px;
direction:rtl;
cursor:pointer;
margin-left:-8px;
margin-top:-1px;
}
.sctpan {
font-size: 12px;
color: #000;
float: left;
width: 92px;
background-image: url(fileButton.jpg);
vertical-align: text-top;
text-align: right;
height: 23px;
}
</style>
<!-- fileButton.jpg为上传控件按钮的背景图片 -->
页面内容如下：
<table width="900" border="0" class="pn-ftable" cellpadding="2" cellspacing="1" align="center" height="447" >
<tr>
<td width="50">
图1：
</td>
<td width="150">
<img src="" id="file1" width="100" height="100" ><br/>
<div class="sctpan">
<input type="file" name="minipicFile" class="file_input" onchange="selectUpImg(this,'file1')" />
</div>
</td>
<td width="50">
图2：
</td>
<td width="150">
<img src="" id="file2" width="100" height="100" ><br/>
<div class="sctpan">
<input type="file" name="picFile" class="file_input" onchange="selectUpImg(this,'file2')" />
</div>
</td>
<td width="50">
图3：
</td>
<td width="150">
<img src="" id="file3" width="100" height="100" ><br/>
<div class="sctpan">
<input type="file" name="otherpicFile" class="file_input" onchange="selectUpImg(this,'file3')" />
</div>
</td>
</tr>
</table>
javascript函数：
<script type="text/javascript">
function selectUpImg(inputObj,imgId){
if(inputObj && inputObj.value!=""){
var img=document.getElementById(imgId);
img.style.display="block";
if(inputObj.files){
img.src = inputObj.files[0].getAsDataURL();
}else if(inputObj.value.indexOf('\\') > -1 || inputObj.value.indexOf('\/') > -1){
img.src = inputObj.value;
}
}
}
</script>