修改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()"/>


[b]以上做法会引发file文本框的安全问题,从而使得form表单提交不了,采用下面这种方式最好:[/b]
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" />'>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值