struts2 JS获取上传文件的绝对路径，兼容IE和FF

浏览数：221 / 时间：2015年06月09日

因为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();
 }