struts 2 JSはアップロードファイルの絶対パスを取得し、IEとFFに対応する

fileコントロールのアップロードに失敗すると自動的に空になるので、テキストボックスを使用してアップロードパスを保存し、異なるブラウザでコントロールのスタイルも互換性が必要です.以下は自分で使った例です

//            ，              
function getExplorer() {

     //IE

     if (navigator.userAgent.indexOf("MSIE")>=0) 

     {

       document.getElementById("1").style.display = "block";

       document.getElementById("2").style.display = "none";

       document.getElementById("FileUpload").className = "file";

       document.getElementById("box").className = "file-box";

     }

     //Firefox

     else if (navigator.userAgent.indexOf("Firefox")>=0) 

     {

       document.getElementById("1").style.display = "none";

       document.getElementById("2").style.display = "block";

       document.forms[0].elements["propertyName"].style.width="625px";

     }

     //Chrome

     else if(navigator.userAgent.indexOf("Chrome") >=0)

     {

       document.getElementById("1").style.display = "block";

       document.getElementById("2").style.display = "none";

       document.forms[0].elements["propertyName"].style.width="495px";

       document.getElementById("ieBtn").style.display = "none";

       document.getElementById("FileUpload").style.width = "93px";

      }

      //Safari

      else if(navigator.userAgent.indexOf("Safari") >=0 )   

      {

       document.getElementById("1").style.display = "block";

       document.getElementById("2").style.display = "none";

       document.forms[0].elements["propertyName"].style.width="585px";

       document.getElementById("ieBtn").style.display = "none";

       document.getElementById("FileUpload").style.width = "90px";

      }

}

スタイルのコード

.file-box{ position:relative;width:55px} 

.btn{ width:55px;} 

.file{ position:absolute;top:0; right:0px; height:24px; filter:alpha(opacity:0);opacity: 0;width:0px } 

htmlのコード
struts 2を使用しているので
コントロールの名前はformInfoです.propertyName
修正する場合、コントロールのvalueは前のactionがrequestを通過する.setAttribute(「Form」,pForm)が設定されており、jsp受信時には以下のように書かなければならない

<table align="center">

<tr>

<td ><s:textfield name="formInfo.propertyName"  value="%{#request.Form.propertyName}"  size="512" maxlength="512" style="width:620px;" readonly="true" /></td>

<td id="1">

<div id="box"> 

    <input type="button" value="  " class="btn" id="ieBtn" />

    <input type="file"name="filepropertyName" id="FileUpload" size="1" onchange="Change()" />

</div>

</td>

<td id="2"><input type="button" name="upload" class="btn"　id="upload" value="  " onclick="selectPDF()"/></td>

<td ><input type="button" value="クリア" class="btn" onclick="delPdf()"/></td>

</tr>

</table>

ボタンをクリックしてテキストボックスのjsにパスを表示します.

//  file               

function Change() {

  //IE

    if (navigator.userAgent.indexOf("MSIE")!=-1||navigator.userAgent.indexOf("Chrome") !=-1||navigator.userAgent.indexOf("Safari") !=-1) 

     {

       var localpath = document.getElementById("FileUpload").value;

       document.forms[0].elements["propertyName"].value = localpath;

     }

     //FF

     else  if (navigator.userAgent.indexOf("Firefox")!=-1) 

     {

          readFileFirefox()

     }  

 } 

 

 //FF

function readFileFirefox() { 

    try { 

        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 

    }  

    catch (e) { 

        return; 

    } 



    var fileName=document.getElementById("FileUpload").value; 

    var file = Components.classes["@mozilla.org/file/local;1"] 

        .createInstance(Components.interfaces.nsILocalFile); 

    try { 

        file.initWithPath( fileName.replace(/\//g, "\\\\") ); 

    } 

    catch(e) { 

        if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e; 

        return; 

    } 



    if ( file.exists() == false ) { 

        alert("File '" + fileName + "' not found."); 

        return; 

    } 

    document.forms[0].elements["propertyName"].value =file.path; 
} 

//              file            
 function selectPDF()
{ 
document.forms[0].FileUpload.click();
 }