奶奶的:折腾了我二天,最终攻克了!网上有非常多样例。

但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过

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();
//假设已经存在的图不是原图,则把server中的图片删除
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

js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域的更多相关文章

  1. 利用jquery.form.js实现将form提交转为ajax方式提交的方法(带上传的表单提交)

    提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...

  2. 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件

    项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...

  3. 玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

    var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = ne ...

  4. 前台图片上传展示JS(单张图片展示)

    <script type="text/javascript">    //下面用于多图片上传预览功能    function setImagePreviews(aval ...

  5. 图片上传 纯js编码

    ie8测试始终不支持,非ie方法一.二都正常 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  6. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  7. spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置

    spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...

  8. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  9. SWFUpload多图上传、C#后端跨域传文件带参数

    前几天工作中用到了SWFUpload上传图片,涉及到跨域,因为前端无法实现跨域,所以只能把文件传到后端进行跨域请求,整理分享下. 效果图 前端 html部分 <!DOCTYPE html> ...

随机推荐

  1. Git显示漂亮日志的小技巧

    Git的传统log如下所示,你喜欢吗? 看看下面这个你喜不喜欢?(点击图片看大图) 要做到这样,命令行如下: 1 git log --graph --pretty=format:'%Cred%h%Cr ...

  2. Java就业前景怎么样?学了后好找工作吗?

    不知道大家对Java就业前景了解多少.随着信息化的发展.IT培训受倒了越来越多人的追捧.在开发领域,JAVA培训成为了很多人的首选!JAVA应用广泛.JAVA培训就业前景良好. 眼下.尽管JAVA人才 ...

  3. springMVC项目异步处理请求的错误Async support must be enabled on a servlet and for all filters involved in async

    从github上down下来一个项目,springMVC-chat.作者全是用的注解,也就是零配置.这可苦了我,经过千辛万苦,终于集成到如今的项目中有一点样子了,结果报出来以下的错误.红色部分.解决方 ...

  4. WP8.1开发者预览版本号已知 Bug

    偶的 Lumia 920 已经升级到最新的 8.1 开发者预览版本号,使用中没有发现什么问题. 可能是由于偶玩手机的情况比較少吧!忽然看到 MS 停止此版本号的更新,并说明有非常多的 BUG,偶就郁闷 ...

  5. codeforces Round #260(div2) D解决报告

    D. A Lot of Games time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. hdu 3652 B-number(数字dp)

    http://acm.hdu.edu.cn/showproblem.php? pid=3652 大致题意:"B-number"即一个整数含有子串"13"且被13 ...

  7. 如何从Terminal Command Line编译并运行Scope

    Ubuntu SDK我们大部分的开发者是非常有效的.它甚至可以帮助我们进行在线调试.在这篇文章中,我们介绍了如何使用command line编译和执行我们scope. 1)创建一个主Scope 我们能 ...

  8. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  9. 走向DBA[MSSQL篇] 从SQL语句的角度 提高数据库的访问性能

    原文:走向DBA[MSSQL篇] 从SQL语句的角度 提高数据库的访问性能 最近公司来一个非常虎的dba  10几年的经验 这里就称之为蔡老师吧 在征得我们蔡老同意的前提下  我们来分享一下蔡老给我们 ...

  10. oracle的分页查询碰到的一个小问题

    订单表.与订单信息表(多个订单信息列有同一个订单id) 查出全部订单以及其信息并依照订单分页 select * from( select a. * , (DENSE_RANK() OVER(ORDER ...