关于这个问题,我搜过也转载过不少的关于这个问题的解答,最后终于解决了,跟他们上面说的一样,下面贴出我的页面,页面中包含了js对跨域的操作。方便以后查看。
<div id="editUserDialogDiv" style="display:none;">
<input id='sessionUID' value='$request.getSession().getId()' type="hidden"/>
<form method="post" action="addOrModify.s" enctype="multipart/form-data" name="userEditForm" id="userEditForm" target="PicUploadIFR">
<input type="hidden" name="image" id="hdimg">
<table id="textTable" width="92%" border="0" align="center" cellpadding="0" cellspacing="0" class="jsPplDialogMiddleBoxTable">
<tr>
<td style="text-align:center;" class="jsPplDialogMiddleBoxTableTd">
频道ID:
</td>
<td style="text-align:center;" class="jsPplDialogMiddleBoxTableTd">
<input id="subid" name="id" value="" readonly aria-readonly="true">
</td>
</tr>
<tr>
<td style="text-align:center;" class="jsPplDialogMiddleBoxTableTd">
频道名称:
</td>
<td style="text-align:center;" class="jsPplDialogMiddleBoxTableTd">
<input id="subname" name="subject_name" value="">
</td>
</tr>
<tr align="center">
<td style="text-align:center;" class="jsPplDialogMiddleBoxTableTd">
频道图标:
</td>
<td>
<img id="subimage" src="#">
</td>
<td >
<input id="subicon" name="upload" type="file" value="">
</td>
</tr>
<tr style="display:none">
<td><input id="sid" name="subject_id" value=""><input id="seq" name="sequence" value=""><input id="hasvod" name="hasvod" value=""><input id="os" name="os_subject" value=""><input id="cname" name="coname" value=""></td>
</tr>
<tr align="center">
<td colspan="2" style="text-align:center;" class="jsPplDialogMiddleBoxTableTd">
<input type="button" style="width:80px;text-align:center;" οnclick="toSubmit()" value="确定"/>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
document.domain = 'ccav.com'; //随便写的...
function upImgCallback(d) {
if (d && d.err === 0) {
$("#hdimg").val(d.data);
$("#subimage").attr("src",d.data);
console.log(d, d.data);
}
}
$(function(){
var con='';
jQuery("#subicon").change(function(){
if ($('#PicUploadIFR').length < 1) {
$('<iframe id="PicUploadIFR" name="PicUploadIFR" style="display:none" />', {}).appendTo($('body'));
}
jQuery.ajax({
type: "GET",
url: "getUploadUrl.s",
dataType: "json",
success: function(data){
con=data;
if(con!=null && con!=''){
jQuery("#userEditForm").attr("action",con).submit();
}
}
});
})
})
function modifyCategory(){
var subid = $("#subid").val();
var subname = $("#subname").val();
var subicon = $("#subicon").val();
if(subname == null || subname == "" || subname == 0){
alert("频道名称不能为空!");
return;
}else{
dialogUserBlock(null);
}
}
function dialogUserBlock(message){
if(message == null)
message = "<h2><img src='images/busy.gif' /> 请稍等...</h2>";
jQuery('#editUserDialogDiv').block({ message: message });
}
function editUserClose(){
jQuery('#editUserDialogDiv').unblock();
jQuery("#editUserDialogDiv").dialog('close');
}
function toSubmit(){
var subname = $("#subname").val();
if(subname == null || subname == "" || subname == 0){
alert("频道名称不能为空!");
return;
}else{
jQuery.post(
"addOrModify.s",
jQuery("#userEditForm").serialize(),
function(result){
alert(result);
window.location.reload();
},
'json')
// $("#userEditForm").attr("action","addOrModify.s").submit();
}
}
</script>
<style type="text/css">
.NAME{
width:25%;
}
.REMARK{
width:25%;
}
.ROLE{
width:50%;
}
</style>
功能是当选择修改分类的图标时,去请求一个getUploadUrl方法,获取图片上传的服务地址,然后让表单去提交 ,提交返回的跨域结果,被存放在拼接的iframe中,然后从iframe中取出图片地址,在img中显示,关键在于document.domain设置的值,需跟你图片上传所在服务的域名保持一致,最好设置为一级域名。
比如图片服务是在ccav这个域名下,那么你这个项目访问的域名也最好是ccav或者它的子域名;若是项目还未上线,那么本地域名则为localhost,这时你可以修改hosts,让localhost指向ccav,具体设置方式,需先设置hosts文件,然后修改应用服务器比如tomcat的server.xml,然后部署项目,启动后已配置的域名访问即可。