js 利用iframe和location.hash跨域解决办法，java图片上传回调JS函数跨域

最新推荐文章于 2020-11-17 11:36:50 发布

twobrushes

最新推荐文章于 2020-11-17 11:36:50 发布

阅读量105

点赞数

分类专栏： javascript 文章标签： java xhtml javascript ViewUI

本文链接：https://blog.csdn.net/twobrushes/article/details/84599803

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章来源：http://www.itnose.net/detail/6044149.html
更多文章：http://www.itnose.net/type/71.html

上图上代码： IE ,firefix,chrome 测试通过

传回,利用,iframe,location.hash,js0 传回,利用,iframe,location.hash,js1 传回,利用,iframe,location.hash,js2

js :这个主页面，部分代码，

function submitUpload(id){
	$("#imgSrc" + id +"").attr("alt", "图片上传中……");
	var imgID = id;
	if(id>0){
		imgID = 1;
	}
	
	var form=document.getElementById("formImg" + imgID +"");	
	//form.action = getContextPath()+"/pc/sys/photoupload/singleup"; //必须先包含sys.js文件
	form.method = "post";		
	form.idnum.value = id;
	var uriUp=domainStr+"/pc/sys/photoupload/singleup";
	form.action = uriUp;
	
	//用于返回
	var currentHref=window.location.href;
	var subHref=currentHref.substring(0, currentHref.lastIndexOf("/"));
	var input_domain = document.createElement("input");
	input_domain.setAttribute("name", "currentDomain");
	input_domain.setAttribute("value", subHref+"/callback-up.html");
	input_domain.setAttribute("type", "hidden");
	form.appendChild(input_domain);
	form.submit();
	//如果已经存在的图不是原图，则把服务器中的图片删除
	var currentPicPath =  $("#imgUrl" + id +"").val();
	if(!contains(origPics, currentPicPath) && currentPicPath!=""){
		delImg(currentPicPath, true);//true 删除图片 
	}
};

// step2: 上传图片，后台回调 
function callback(message) {
	var id=message.id;
	if(message.status.code=="0"){
		var filePath=message.filePath;
		var dbFilePath=message.dbFilePath;
		$("#imgUrl" + id +"").attr("value", dbFilePath);
		$("#imgSrc" + id +"").attr("src", filePath);
	}else{
		if(id!=0){
			$("#imgSrc" + id).parent().remove();
		}
		_message(message.status.message); //上传错误提示
	}
};

服务端处理主要代码：

	// -----------------------------------------------------------------------------------
	// 单张图片上传，返回路径
	// ----------------------------------------------------------------------------------
	@RequestMapping(value = "/singleup", method = RequestMethod.POST)
	public void SingleUp(HttpServletRequest request, HttpServletResponse response, @RequestParam(value = "suffixDir", required = true) String suffixDir,
			@RequestParam(required = false, value = "cutPhoto") boolean cutPhoto, @RequestParam(required = false, value = "merchantId") String merchantId) throws Exception
	{
		StringBuffer basePath=new StringBuffer(request.getScheme());
		basePath.append("://");
		basePath.append(request.getServerName());
		basePath.append(":");
		basePath.append(request.getServerPort());
		basePath.append(request.getContextPath());
		basePath.append("/");
		basePath.append(FileUpload.getRealFilePath()/*.substring(0,FileUpload.getRealFilePath().length()-1)*/);
		
		User user = super.getLoginUser(request).getUser();
		if (user != null)
		{
			
			String filePath = fileUploadService.singleUpload(request, user, suffixDir, Fs.FileUpLoadType.PHOTO, cutPhoto, merchantId);

			// 处理返回状态
			UpoladStatus result = getStatus(filePath);
			String PromptSize = "";
			if (UpoladStatus.类型无效或图片过大.toString().equals(result.toString()))
			{
				// 2^10=1024
				PromptSize = "(最大限制:" + (FileUpload.photoSize >> 20) + "MB)";
			}

			PrintWriter out = response.getWriter();
			response.setHeader("Cache-Control", "none-cache");
			String idnum = request.getParameter("idnum");
			String reutrnDate = "{'id':'" + idnum + "','filePath':'" + basePath.append(filePath).toString() + "','dbFilePath':'" + filePath + "','status':{'code':'" + result.ordinal() + "','message':'" + result.name()
					+ PromptSize + "'}}";
			String currentDomain = request.getParameter("currentDomain");
			//<script>parent.parent.callback(" + reutrnDate + ");</script>
			String ret="<iframe id=\"ifr\" src=\""+currentDomain+"#"+reutrnDate+"\"></iframe>";
			//log.info("ret===:"+ret);
			out.print(ret);
		
		}

	}

中间html 转换用，关健

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
<script type="text/javascript">

//alert(document.domain);
var returndata=self.location.hash.substring(1);
var message = eval('(' + returndata + ')'); 
parent.parent.callback(message);

</script>
</body>
</html>

我不善长写讲程，真接看代码吧....

参考博文:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m3

twobrushes

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 利用iframe和location.hash跨域解决办法，java图片上传回调JS函数跨域

文章来源：http://www.itnose.net/detail/6044149.html更多文章：http://www.itnose.net/type/71.html上图上代码： IE ,firefix,chrome 测试通过 js :这个主页面，部分代码， function submitUpload(id){ $("#imgSrc" + id +"")...
复制链接

扫一扫

专栏目录