批改Input File的样式

修改Input File的样式
1.首先通过一个按钮触发file的click事件！
2.File的click事件，选择一个文件确认之后触发本身的onchange事件，给input text文本框赋值。

JAVAScript：

//浏览文件
function fileBrowse(){
	//触发浏览事件
	document.forms["fileForm"].upload.click();
}

function setFilePath(){
	$("#showFilePath").val(document.forms["fileForm"].upload.value);
}

HTML：

<input type="file" id="uploadFile" name="upload" style="display: none;" onchange="setFilePath()"/>										<input id="showFilePath" type="text" style="width:300px;margin:4px;" >
														<input name="Browse" value="Browse..." type="button" style="margin-bottom:4px;" class="button" onclick="fileBrowse()"/>

以上做法会引发file文本框的安全问题，从而使得form表单提交不了，采用下面这种方式最好：
javascript：

function setFilePath(){   
	 	    $("#showPath").val(document.forms["local_radio"].upload.value);   
	 	}
	 	$(function(){
	 		
	 		$("#local_button").mouseover(function(e){
	 			$("#uploadFile").show();
	 			var local_button_left = $(this).offset().left;
	 			var local_button_innerWidth = $(this).innerWidth();
	 			var x_ = e.pageX;
	 			var file_left = x_;
	 			var file_innerWidth = $("#uploadFile").innerWidth();
	 			//alert(local_button_left+"-"+local_button_innerWidth+"-"+x_+"-"+$("#uploadFile").innerWidth());
	 			if((x_+file_innerWidth)>(local_button_left+local_button_innerWidth)){
	 				$("#uploadFile").css("left",e.pageX-file_innerWidth);
	 			}else{
	 				$("#uploadFile").css("left",local_button_left-5);
	 			}
	 			
	 		});
	 	});

HTML：

<style type="text/css">
  		.file{
  			display:none;
  			width:0px;
  			height:22px;
  			position:absolute ;
  			filter: alpha(opacity = 0);
  			-moz-opacity:0;
  			opacity: 0;
  			z-index: 110;
  		}
  	</style>
<input type="file" id="uploadFile" name="upload" onchange="setFilePath()" class="file"/>
							<input type="text" class="textbox140" id="showPath" style="width:300px;" readonly="readonly">
							<input type="button" id="local_button" class="button95" value='<s:text name="broker.manager.browse" />'>