最近在做一个项目,包含几个独立的子项目,都用到了图片上传的功能,因此把要把图片处理部分独立出来。
因为子项目有的使用java,也有使用.net开发的,所以考虑到兼容性,直接采用js客户端来实现。而每个项目使用独立的一个端口,所以采用iframe方式解决js的跨域问题。
原理:
客户端打开一个模式窗口win1,win1通过iframe嵌套文件服务器上的上传页面。文件服务器在完成上传过重定向win1页面到客户端的另一个窗口win2,并带上上传后的文件实际访问路径参数,win2完成从url地址上获取文件地址,返回该地址并关闭模式窗口。
实现:
图片的上传服务器采用ssh框架,在图片服务器上建立一个图片上传页面供客户端嵌套,upload.html页面代码如下:
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="http://${basePath}/fileService/uploadFile/uploadFileForOthers.action" method="post" enctype="multipart/form-data">
<input id="upload" type="file" size="15" name="upload" class="input" >
<input name="returnUrl" value="${param.returnUrl}" type="hidden"/>
<input name="typeFlag" value="${param.typeFlag}" type="hidden"/>
<input name="securityKey" value="${param.securityKey}" type="hidden"/>
<br>
<input type="submit" value="upload" >
</form>
</body>
</html>
以上form的action地址为文件上传的实际地址,upload为上传的文件名,returnUrl为win2地址,其他两个可忽略,项目中用于上传图片的分类和安全机制。
图片上传action:uploadFileForOthers.class
public String uploadFileForOthers()
{
String pix = "?";
if(returnUrl.indexOf("?")>0)
{
pix = "&";
}
//验证验证码
String key = RSA.Dec_RSA(securityKey);
if(System.currentTimeMillis() -(new Long(key)).longValue()>600000)
{
LOG.error("-----------------------------�---------------验证码不正确--------------------------------------------------");
String script = "<script type='text/javascript'>window.parent.location='"+ returnUrl + pix+ "errorMsg=timeout'</script>";
PrintWriter out;
try
{
out = ServletActionContext.getResponse().getWriter();
out.println(script);
out.flush();
out.close();
}
catch (IOException e)
{
LOG.error("-----------------------------�---------------提示用户出错--------------------------------------------------");
}
}
LOG.error("-----------------开始保存"+typeFlag+"来源的文件�---------------uploadFileName:"+uploadFileName+"---------------");
try
{
if(uploadFileName!=null&&!uploadFileName.trim().equals("")&&fileUpload!=null)
{
String newFileName = fileUpload.createFileName();
LOG.error("----------------------------�---------------newFileName:"+newFileName+"------------------------------------");
String projectPath =ServletActionContext.getServletContext().getRealPath("/");
String url = fileUpload.uploadFile(upload, uploadFileName, typeFlag, newFileName,projectPath);
String script = "<script type='text/javascript'>location='"+ returnUrl + pix+"filename="+ url + "'</script>";
//本句为关键,经测试ie6-ie8,火狐等都可成功。(原来采用parent.location来重定向时ie6-ie7可成功,火狐和ie8无法成功)
PrintWriter out = ServletActionContext.getResponse().getWriter();
out.println(script);
out.flush();
out.close();
LOG.error("-----------------------------�---------------保存成功--------------------------------------------------");
}
}
catch (Exception e)
{
LOG.error(e.getMessage());
String script = "<script type='text/javascript'>window.parent.location='"+ returnUrl + pix+ "errorMsg="+ e.getMessage() + "'</script>";
PrintWriter out;
try
{
out = ServletActionContext.getResponse().getWriter();
out.println(script);
out.flush();
out.close();
}
catch (IOException e1)
{
}
}
LOG.error("-----------------------------�---------------结束--------------------------------------------------");
return null;
}
客户端:win1.html
<html>
<body>
<iframe src="http://${KEY_FILESERVICE}/fileService/fileupload.jsp?typeFlag=webimg&actionUrl=${KEY_FILESERVICE}&securityKey=${minwen}&returnUrl=<%=basePath %>win2.jsp?rid=${param.rid}" frameborder="0" scrolling="no" marginwidth="0" border-style: none></iframe>
</body>
<html>
客户端:win2.jsp
<%
String errorMsg = request.getParameter("errorMsg");
if(errorMsg != null && errorMsg.trim().length()>0){
%>
<script type="text/javascript">
alert("${param.errorMsg}");
window.parent.window.close();
</script>
<%}else{
String url = request.getParameter("filename");
if(url!=null && url.trim().length()>0){
%>
<script type="text/javascript">
window.parent.returnValue="${param.filename}";
window.parent.window.close();
</script>
<%
}else{
}
}
%>
调用js
function openwin(){
var url="win1.htm?rid=${rid}";
var returnData=window.showModalDialog(url,window,"status:no;dialogWidth:200px;dialogHeight:150px;scroll:no;")
if(returnData != undefined){
dd(returnData);
}
//WO_LS( url, 400,200);
}