用iframe做伪ajax下传文件

用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              想法不错哦