struts2 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的代码

由于使用的是struts2

控件的name是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(); }