SWFUpload的跨域请求处理

最新推荐文章于 2019-03-07 17:57:00 发布

iteye_13073

最新推荐文章于 2019-03-07 17:57:00 发布

阅读量384

点赞数

分类专栏： JAVAWEB 文章标签： SWFUpload跨域

JAVAWEB 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用SWFUpload组件实现在不同服务器间的图片上传功能。具体包括前端页面配置、后端处理逻辑及返回JSON数据的解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近工作中遇到这样一个问题，有两组服务器，比如one.abc.com和two.abc.com，程序部署在one服务器上，需要实现的功能是：

通过访问程序上传图片到two服务器，之前没有做过类似的功能，上网查了下资料，发现SWFUpload组件，

经过查资料和自己查看源代码，实现了这个功能，以下是我这次的总结。

首先将程序分别部署到one和tow服务器上。

前台index.jsp代码（注意将upload_url和flash_url路径修改为你要上传图片的服务器地址 ）ps：form中的action路径没用着

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <link href="<%=basePath%>css/default.css" rel="stylesheet" type="text/css" />
   	<script type="text/javascript" src="<%=basePath%>js/swfupload/swfupload.js"></script>
   	<script type="text/javascript" src="<%=basePath%>js/swfupload/swfupload.queue.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/swfupload/fileprogress.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/swfupload/handlers.js"></script>
   <script type="text/javascript">
		var upload1, upload2;
		window.onload = function() {
			upload1 = new SWFUpload({
				//提交路径
				upload_url: "http://two.abc.com/struts2-ibatis/upload.do",//上传图片的服务器
				//向后台传递额外的参数
				post_params: {"name" : "kaobian"},
				//上传文件的名称
				file_post_name: "file",
				
				// 下面自己按照字面意思理解
				file_size_limit : "102400",	// 100MB
				file_types : "*.*",
				file_types_description : "All Files",
				file_upload_limit : "10",
				file_queue_limit : "0",

				// 事件处理
				file_dialog_start_handler : fileDialogStart,
				file_queued_handler : fileQueued,
				file_queue_error_handler : fileQueueError,
				file_dialog_complete_handler : fileDialogComplete,
				upload_start_handler : uploadStart,
				upload_progress_handler : uploadProgress,
				upload_error_handler : uploadError,
				upload_success_handler : uploadSuccess,
				upload_complete_handler : uploadComplete,

				// 按钮的处理
				button_image_url : "images/XPButtonUploadText_61x22.png",
				button_placeholder_id : "spanButtonPlaceholder1",
				button_width: 61,
				button_height: 22,
				
				// Flash Settings  swf文件的路径，需要修改为two服务器的地址
				flash_url : "http://two.abc.com/struts2-ibatis/js/swfupload/swfupload.swf",
				custom_settings : {
					progressTarget : "fsUploadProgress1",
					cancelButtonId : "btnCancel1",
					progressStrid : "strid"
				},
				// Debug Settings
				debug: false
			});
	     }
	</script>
  </head>
 <body>
  <div id="content">
    <form action="http://fxb.abc.com:8080/struts2-ibatis/swfUoload.do" method="post" name="thisform" enctype="multipart/form-data">
		<table>
			<tr valign="top">
				<td>
				<input type="text" name="str" id="strid" value=""/>
					<div>
						<div class="fieldset flash" id="fsUploadProgress1">
							<span class="legend">文件上传</span>
						</div>
						<div style="padding-left: 5px;">
							<span id="spanButtonPlaceholder1"></span>
							<input id="btnCancel1" type="button" value="Cancel Uploads" οnclick="cancelQueue(upload1);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
							<br />
						</div>
					</div>
				</td>
			</tr>
		</table>
    </form>
    </div>
  </body>
</html>

action处理代码如下（注意action中的File名字也就是file要跟前台jsp中的file_post_name一致 ）

package com.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;

import org.apache.struts2.ServletActionContext;
import org.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

public class PictureAction extends ActionSupport {
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private File file;
	private String fileFileName;
	private String fileContentType;
    private String name;

	public String execute() throws Exception {
		// 实现上传
		InputStream is = new FileInputStream(file);
		String rootPath = this.getClass().getClassLoader().getResource("/")
		.getPath();
		rootPath = rootPath.substring(0, rootPath.indexOf("/WEB-INF/classes"));
		File deskFile = new File(rootPath+"/upload/", this.getFileFileName());
		OutputStream os = new FileOutputStream(deskFile);
		byte[] bytefer = new byte[1024];
		int length = 0;
		while ((length = is.read(bytefer)) != -1) {
			os.write(bytefer, 0, length);
		}
		name = "顾小白";
		os.close();
		is.close();
		// 建立一个根对象
		JSONObject root = new JSONObject();
		root.put("id", "123");
		root.put("title", "顾小白");
		PrintWriter out = ServletActionContext.getResponse().getWriter();
		out.print(root);
		out.close();
		return "success";
	}

	public File getFile() {
		return file;
	}

	public void setFile(File file) {
		this.file = file;
	}

	public String getFileFileName() {
		return fileFileName;
	}

	public void setFileFileName(String fileFileName) {
		this.fileFileName = fileFileName;
	}

	public String getFileContentType() {
		return fileContentType;
	}

	public void setFileContentType(String fileContentType) {
		this.fileContentType = fileContentType;
	}
	
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
	
}

配置文件如下（注意如果要返回json数据格式需要表明返回类型 ）

<action name="upload" class="com.action.PictureAction">
	<result name="success" type="json"/>
	<result name="input">/index.jsp</result>
</action>

最后是在handlers.js中的uploadSuccess方法接收你返回的数据（如我返回的是json格式）

function uploadSuccess(file, serverData) {
	try {
		var progress = new FileProgress(file, this.customSettings.progressTarget);
		progress.setComplete();
	    document.getElementById(this.customSettings.progressStrid).value=serverData;
	    var data=eval("("+serverData+")");
	    alert(data["title"]);
		progress.setStatus("Complete.");
		progress.toggleCancel(false);

	} catch (ex) {
		this.debug(ex);
	}
}

数据有了，要怎么处理就看你的需求了o(∩_∩)o

我是这样实现的，欢迎大家一起讨论。