zoukankan      html  css  js  c++  java
  • 当前窗口和Iframe之间的相互访问(图片上传成功后立刻显示在当前页面上)

    IEFirefoxiframe document对象的差异性

    IE6IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在Firefox下却不可以使用,Firefox下使用的是符合W3C标准的 document.getElementById(ID).contentDocument 方法,今天我在写实例的时候,通过IE8进行测试,IE8也是使用的符合W3C标准的 document.getElementById(ID).contentDocument 方法。所以我们可以写一个在IEFirefox下通用的获取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来处理上传的图片,实现无刷新上传。

  • 相关阅读:
    Sql Server 2008卸载后再次安装一直报错
    listbox 报错 Cannot have multiple items selected when the SelectionMode is Single.
    Sql Server 2008修改Sa密码
    学习正则表达式
    Sql Server 查询第30条数据到第40条记录数
    Sql Server 复制表
    Sql 常见面试题
    Sql Server 简单查询 异步服务器更新语句
    jQuery stop()用法以及案例展示
    CSS3打造不断旋转的CD封面
  • 原文地址:https://www.cnblogs.com/iu90/p/3074591.html
Copyright © 2011-2022 走看看