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:; right:0px; height:24px; filter:alpha(opacity:0);opacity:;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();
}
struts2 JS获取上传文件的绝对路径,兼容IE和FF的更多相关文章
- JS获取上传文件的绝对路径,兼容IE和FF
<input type="file" id="fileBrowser" name="fileBrowser" size="5 ...
- js获取上传文件的绝对路径
在html中 <input type="file" id="importFile" /> <input type="bu ...
- Atitit.js获取上传文件全路径
Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...
- js获取上传文件内容(未完待续)
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- js获取上传文件内容
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- js 获取上传文件的字节数及内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS 获取上传文件的内容
<div> 上传文件 : <input type="file" name = "file" id = "fileId" / ...
- JS获取上传文件的名称、格式、大小
<input id="File1" type="file" onchange="checkFile(this)" /> 方式一) ...
- js获取上传文件个数 以及名称
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- C#实现打印与打印预览功能(转)
在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Microsoft .Net Framework的打印功能都以组件的方式提供,为程序员提供了很大的方便,但是这 ...
- 清除oracl中有主外键关联的表中的部分数据。
1.禁用主外键BEGINfor c in (select 'ALTER TABLE '||TABLE_NAME||' DISABLE CONSTRAINT '||constraint_name||' ...
- [POJ] 3020 Antenna Placement(二分图最大匹配)
题目地址:http://poj.org/problem?id=3020 输入一个字符矩阵,'*'可行,'o'不可行.因为一个点可以和上下左右四个方向的一个可行点组成一个集合,所以对图进行黑白染色(每个 ...
- 转:15 Best Responsive Web Design Testing Tools
Responsive Web Design is regarded as being the approach which suggests that web design and developme ...
- Android listview局部刷新和模拟应用下载(zhu)
在android开发中,listview是比较常用的一个组件,在listview的数据需要更新的时候,一般会用notifyDataSetChanged()这个函数,但是它会更新listview中所有可 ...
- android 截取指定位置字符串
String str = "s\ziyuan"; String newStr = str.subString(str.indexOf("\\"),str.len ...
- 浅析门户网站体育赛事CDN加速解决方案
经过近些年来的高速发展,互联网已经成为现今媒体传播的主要力量.这一点在大型体育赛事的报道与转播上,体现的尤为明显.更及时的信息内容.更多样的报道形式.更齐全的资料组成.更方便的阅读查询.更具互动性的报 ...
- COJ 0979 WZJ的数据结构(负二十一)
WZJ的数据结构(负二十一) 难度级别:C: 运行时间限制:5000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你实现一个数据结构,完成这样的功能: 给你一个 ...
- 从MongoDB说起
近日MongoDB宣布完成新一轮1.5亿美元融资,投资者包括EMC.Salesforce.com.英特尔.Red Hat以及Altimeter Capital等投资机构.作为当今最流行的NoSQL数据 ...
- php PDO操作乱码问题
前阶段用php写了一个小网页(每周一练),然后就一直忙着其他事也没管它,今天想着给它写个添加数据的页面,用pdo操作,没想到插入数据库的中文数据竟然乱码了,竟然乱码了!然后我就方了,赶紧检测数据传输过 ...