input fileのデフォルトのスタイルを変更します.

2784 ワード

 、       
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;" 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      ,        。
 、       
  :
    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" 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" />'>