上传图片的使用需要弹出一个iframe层来使用ajax弹出窗口
ajax图片上传后,需要关闭iframe弹出层窗口,更新父级页面
代码如下
$.ajax({ type: "POST", url: "/app/userinfo/uploadimg1", data:form, datatype:'json', processData:false, contentType:false, success: function(data) { console.log(data) var ResData=$.parseJSON(data); var Jcode=ResData.code; if(Jcode==0){ layer.msg('图片上传失败', {icon: 2}); layer.closeAll(); //疯狂模式,关闭所有层 }else if(Jcode==1){ layer.msg('图片上传成功', {icon: 1}); var index = parent.layer.getFrameIndex(window.name); setTimeout(function(){ parent.layer.close(index);//关闭弹出层 parent.location.reload();//更新父级页面(提示:如果需要跳转到其它页面见下文) }, 2000); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { layer.msg('图片上传失败', {icon: 2}); layer.closeAll(); //疯狂模式,关闭所有层 return false; } });
//更新父级页面(提示:如果需要跳转到其它页面)
parent.location.href=url; //这个url可以为变量或是常量,
再附上一份参考文档示例(下文为转载):
好久都没有用过layer了,最近要用layer来做一个报名页面,是这样的,现在有一个活动的列表页面,我需要点击每一个列表就弹出报名,然后通过ajax后台传值确认前台,如果报名成功则关闭这个iframe窗口,并且刷新列表页。下面是方法:
// 这个是在iframe里面的js代码
var url = '/activity';
var frameindex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
$(document).on('click','[type=submit]',function(){
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
$.post(url,data,function(ev){
if(ev.status=='success'){
layer.msg(ev.msg);
parent.location.href="https://blog.csdn.net/";//示例:跳转到CSDN博客也是可以的
}else{
layer.close(index);
layer.msg(ev.msg);
}
},'json')
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
在这个里面需要注意的就是success里面的方法了,这里刷新父页面是采用的parent.location.href="/activity";
,注意这个地方的parent,还有这个地方不能够写成:
layer.msg(ev.msg);
parent.layer.close(frameindex); //再执行关闭
parent.location.href="https://blog.csdn.net/";
- 1
- 2
- 3
这个是我做的时候发现的,我大概就是认为关闭了之后就不会知道这个parent是那个了,或者关闭窗口js就不会运行了。
这个以后弹窗提交表单会非常有用,值得我自己整理一下思路,呵呵哒!!
更多前端资讯和学习心得 请关注下方公众号,还有视频教程可以领取