2019獨角獸企業重金招聘Python工程師標準>>>

一、第一種實現方式

1.通過一個按鈕觸發file的click事件；

2.file的click事件觸發之后，選擇一個文件之后，觸發file的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;" οnchange="setFilePath()"/>

<input id="showFilePath" type="text" style="width:300px;margin:4px;" >
<input name="Browse" value="Browse..." type="button" style="margin-bottom:4px;" class="button" οnclick="fileBrowse()"/>

以上做法會引發file文本框的安全問題，從而使得form表單提交不了，采用下面方式最好。

二、第二種實現方式

原理：

把真實的input(file)置透明后放到模擬input(file)的上方，當鼠標移至模擬按鈕時觸發mouseover事件，通過js使input file 瀏覽按鈕與模擬按鈕重合。

然后把真實input(file)里的值取出放到模擬文本框里面。

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);
???????????????? }
???????????? });
});

CSS：

<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>

HTML代碼：
<input type="file" id="uploadFile" name="upload" οnchange="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" />'>

轉載于:https://my.oschina.net/xianggao/blog/75802

總結

以上是生活随笔為你收集整理的修改input file默认样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。