title: iframe无刷新跨域上传文件并获取返回值
CreateTime: 2012-07-24 20:53:00
UpdateTime: 2012-07-24 20:53:00
CategoryName: web
---
---
title: "iframe无刷新跨域上传文件并获取返回值"
date: 2012-07-24T20:53:00+08:00
draft: false
tags: ["web"]
categories: ["web"]
author: "springrain"
---
通常我们会有一个统一的上传接口,这个接口会被其他的服务调用.如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了.比如,新浪微博启用了新域名www.weibo.com,但接口还是使用原来的域:picupload.t.sina.com.cn.
研究了一下新浪微博的处理方法.
首先是一个正常的上传页面 upload.jsp
```jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
Upload
```
这里有一个关键点是form的target要指向iframe,同时把iframe隐藏起来,这样上传的处理结果就会显示在该iframe里.隐藏域里的cburl(callback)参数表示处理完成后要跳转的url,因为我们的目标是iframe,所以只会把跳转的页面输出到iframe,而不会让当前页面跳转.
还有一点,callback url要和当前页面同域.跨域的iframe无法调用父页面的内容.
再来看看fileupload,也就是form的action 是个servlet
```java
cburl = cburl + "?" + "filenames=" + URLEncoder.encode(fileNames.toString(), "UTF-8");
```
这里可以处理文件,然后入库.操作完成后,把文件的id及其他信息都放在url里,最后跳转到这个url.
最后来看看cburl.jsp,也就是刚刚fileupload跳转到的url,这个文件的内容会填充到页面的iframe里.
```jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
String cburl=new String(request.getParameter("filenames").getBytes("ISO-8859-1"),"UTF-8");
%>
```
这里调用了父窗口的cburl方法,这样父页面就获得了文件的id.