雅荷心语博客今天做图片上传功能模块, 就是当前页面点击打开一个frame层, 在frame 里面上传图片,如果图片上传完成,Js 在子页面通知父页面处理完成的数据信息,因为上传的frame和使用的不是同一个网站,所以涉及到了跨域的问题!
首先,使用layer的弹窗插件,把之前处理好的frame 打开:
|
1 2 3 4 5 6 7 8 9 10 11 |
function upload() { //iframe层 layer.open({ type: 2, title: '上传图片', shadeClose: true, shade: 0.8, area: ['680px', '450px'], content: 'http://file.XXX.com/uploads.php' //iframe的url }); } |
这里当前页面的域名是 www.xxx.com
具体iframe 里面,已经处理好了图片上传功能,并在上传完成后通知父页面
|
1 2 3 4 5 6 |
onSuccess: function(file, response){ // 文件上传成功的回调方法 console.info("此文件上传成功："); console.info(file.name); $.fn.cache('<?php echo isset($_GET['name'])?$_GET['name']:'imgData'; ?>',response); window.parent.UploadSuccess(response);//调用父页面 }, |
这里域名是 file.xxx.com
父页面的处理逻辑
|
1 2 3 4 5 6 7 8 9 10 11 |
function UploadSuccess(data) { var data = Function('return '+ data +'')(); if(data.code > 0){ layer.msg('上传成功',{shadow:false,time:2000},function(){ layer.closeAll(); toDealwith(data);//处理图片数据 }) }else{ layer.msg('上传失败'); } } |
然而因为域名不同,所以会报错
所以我们这里需要做一个设置:
document.domain = “xiangmijie.com”;
两个页面加入,这样的话,就在同一域下面
然后调用成功!
