css控制file控件透明 漂浮

 css控件透明属性设置IE firefor设置方法
<STYLE type=text/css>
.upfilefield{position:absolute; FILTER: alpha(opacity:0);-moz-opacity:0.5;opacity: 0; width:88px; height:29px; top:0px; right:0px;}
</STYLE>

导入：<input type="file" name="file" id="file" class="easyui-validatebox" data-options="required:true" style="position:absolute; FILTER: alpha(opacity:0);-moz-opacity:0.5;opacity: 0;width:150px;"/>
<input type="button" onclick="chooseFile()" value="选择EXCEL表" style="border:none;" />

ie 设置为FILTER: alpha(opacity:0);
firefor 设置为-moz-opacity:0.5;opacity: 0; 

 

function chooseFile(){
document.getElementById("file").click();
}

 

function fileOnChange()
{
var array1=$('#file').val().split('\\');
var fileName=array1[array1.length-1];
$('#txtFileName').val(fileName);
}

将导入按钮选择文件修改为“选择EXCEL表”

<div style="float:left;width:25px;height:10px;"></div><div style="width:270px;float:left">导入：<input type="file" name="file" id="file" style="position:absolute;width:120px;" class="easyui-validatebox" data-options="required:true" onchange="fileOnChange()" />
<input type="button" onclick="chooseFile()" value="选择EXCEL表" style="border:none;width:120px;" /><input type="text" id="txtFileName" name="txtFileName" style="width:108px;border:none;" readonly="readonly" /></div>
<div style="float:left;"> <input type="button" name="btnsc" id="btnsc" value="上传" class="but20" />
<span style="text-align:right;"><input type="button" name="but" value="模板下载" class="but30" onclick="DownloadTemplate()" />
<input type="button" name="cs" value="查看参数" class="but30" onclick="CheckParams()" /></span></div>

 

会有个bug：在ie下，单击按钮前半部分无反应：因为在ie下file控件必须单击浏览按钮才可