用iframe做伪ajax上传文件
由于ajax无法发送带有文件的post请求。因此为了打到ajax效果,需要借助iframe。
form表单中action正常填写处理文件上传的操作。target填写一个隐藏的iframe。
这样表单提交之后,文件会被上传,但是页面却不会刷新,因为表单提交后被刷新页面为隐藏的iframe,因此用户看到的效果和ajax处理的效果是一样的。
现在看到的效果是和ajax一样了,但是ajax是有返回值的。但是现在我们值刷新了iframe页面,却没有ajax的返回值,不知道操作到底是成功了还是失败了。因此需要在页面中写一个js的callback方法,然后在处理上传操作成功后来调用这个callback方法。
这个例子是php做的文件处理,其他语言同理。
echo "<script>parent.callback('图片上传失败',false)</script>";
这句花,调用了iframe的父页面的callback方法。并且将一些信息作为参数传进了callback方法。function uploadImg(){var names=$("#AidImg").val().split(".");if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG"){$("#imgError").html("<div class='bzsj_left'></div>"+"海报必须为gif,jpg,png格式");$("#imgError").show();return;}$("#formImg").submit();}function callback(message,success){if(success==false){$("#imgError").html("<div class='bzsj_left'></div>"+message);$("#imgError").show();}else{$("#imgError").hide();var paths=message.split("/");$("#img").attr("src",message);$("input[name='imgUrl']").val(paths[paths.length-1]);}}
这里是页面的callback方法,接受了上传图片处理后返回的结果。
这样,就用iframe模拟了ajax来上传文件。 2 楼 zhangshune 2011-08-17 想法不错哦