当前窗口和Iframe之间的相互访问(图片上传成功后立刻显示在当前页面上)

IE和Firefox对iframe document对象的差异性

在IE6、IE7中，我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象，可是这是不符合W3C标准的写法，也是IE下独有的方法，在Firefox下却不可以使用，Firefox下使用的是符合W3C标准的 document.getElementById(ID).contentDocument 方法，今天我在写实例的时候，通过IE8进行测试，IE8也是使用的符合W3C标准的 document.getElementById(ID).contentDocument 方法。所以我们可以写一个在IE和Firefox下通用的获取iframe document对象的函数getIFrameDOM：

在当前窗口中，访问Iframe窗口

function getIFrameDOM(id){
         return document.getElementById(id).contentDocument || document.frames[id].document;
}

window.frames['name']; //好像也可以 测试了FF和IE 678 都没问题！

封装成函数

functio getFrameNode(name,id){
    var frm = window.frames[name];
    return frm.document.getElementById(id);
}

在iframe中访问父窗口的文档内容

this.parent

封装函数

function getParentNode(id){
    if(!id) return;
    return this.parent.document.getElementById(id);    
}

模拟Ajax无刷新上传。通过隐藏Iframe的形式

效果如图

点击上传后

也可以不用上传按钮直接绑定事件在选择图片后触发。

<form action="do.php" method="post" enctype="multipart/form-data" target="loadiframe"><!-- 重点！！ target属性设置为本页面的iframe,这样提交后就不会刷新本页面 -->
    <table>
        <tr>
            <td><input type="file" name="load" /></td>
            <td> <input id="btn" type="submit" value="上传文件" /></td>
            <td>
            <span  style="114px;height:160px;background:url(1.jpg) no-repeat;display:block;border:1px solid #e0e0e0;"><!--添加一个图片的外围容器 -->
             <img id="show" src="1px.jpg" /><!--插入1个像素的图片，避免IE下的红叉叉 -->
             </span>
            </td>
        </tr>
    </table>
    </form>
    <div id="div"></div>
    <iframe name="loadiframe" src="do.php" style="display:none;"></iframe><!-- 重点！！ 接收父窗口传入的图片  -->

服务器端代码

<?php
    $file_tmp_name = $_FILES['load']['tmp_name'];
    $file_type = $_FILES['load']['type'];
    $path = './'.date('i-s').'.jpg';
    if($file_type == 'image/jpeg' ||$file_type == 'image/pjpeg'){ //这里一定注意，IE下的jpg的MIME类型是pjpeg,很久没用PHP，忘记了，一直以为是JS兼容性问题，排查了好久。
        if(move_uploaded_file($file_tmp_name,$path)){
            $js = file_get_contents('jslib.js'); //引入上面写的获取父窗口DOM元素的函数。
            $js = "<script type='text/javascript'>".$js.";getParentNode('show').src='".$path."'</script>";
            echo $js;
        }    
    }
    
?>

一个简单的不刷新本页的图片上传，就是这样了。原理很简单，就是iframe和父窗口之间的操作。并且通过隐藏的iframe来处理上传的图片，实现无刷新上传。