web上传文件按钮及预览

在做图片上传时，经常需要将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>