文章来源：http://www.itnose.net/detail/6044149.html
更多文章：http://www.itnose.net/type/71.html
上图 上代码： 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();
//如果已经存在的图不是原图，则把服务器中的图片删除
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
相关推荐
通过动态创建`<script>`标签，设置其`src`属性为提供服务的服务器接口，并由服务器返回一个包裹在回调函数中的JSON数据。这种方式只适用于GET请求，且存在安全隐患，因为它无法处理错误和设置HTTP头信息。 2. **...
### JavaScript跨域总结与解决办法 #### 跨域的基本概念 跨域问题源自于浏览器的安全策略之一——**同源策略**。同源策略是浏览器为了防止恶意网站通过脚本访问其他网站的数据而采取的一种安全措施。它规定了一个...
服务器接收到请求后，返回一个JavaScript函数，该函数的名称与客户端传递的回调函数名相同，并将数据作为参数传递。例如，客户端的回调函数名为`doSomething`，服务器返回`doSomething({"a": "1"})`，客户端的`...
3. `location.hash` + `iframe`：通过改变`iframe`的`location.hash`值，监听`hashchange`事件，可以实现跨域数据传递。 4. `window.name` + `iframe`：`window.name`属性在页面刷新或跳转后仍能保持其值，因此可以...
它的工作原理是，服务器提供一个可以接受回调函数名的参数，客户端通过动态创建`<script>`标签，将这个回调函数名作为参数传递给服务器，服务器返回一个包含数据的JavaScript函数调用，浏览器执行这个函数并传递回...
服务端提供一个可接受查询参数的脚本，这个参数是回调函数名，返回的数据会被包裹在这个回调函数中，客户端预先定义好这个函数以接收数据。 5. **CORS(Cross-Origin Resource Sharing)**： CORS是现代浏览器支持的...
当脚本加载完成时，可以触发回调函数执行相应的处理逻辑。 3. **location.hash + iframe**：通过在URL的hash部分传递信息，实现跨域页面间的通信。例如，cs1.html 创建一个指向 cs2.html 的iframe，cs2.html 改变...
JSONP的基本原理是，服务器提供一个可接受自定义回调函数名的接口，客户端通过动态创建`<script>`标签，将回调函数名作为参数传递给服务器，服务器返回一个包裹在该回调函数内的JSON数据。例如： ```javascript ...
03 JS的history对象和location对象 04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js练习之二级联动 06 jquery以及...