图片预览 

<!DOCTYPE html>
<html>
<head>
<title>图片预览demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <iframe name="frm_dealer" id="iframe"></iframe>
    <form action="iframe.html" target="frm_dealer" encType="multipart/form-data" id="form">
        <input type="file" name="file" value="shangchuan" id="file"/>
    </form>
    <input type="button" id="tijiao" value="提交" />
    <img src="" alt="tuxiang" id="img"/>
    <script type="text/javascript">
        document.getElementById('file').onchange = function(){
            document.getElementById('tijiao').onclick = function() {
               document.getElementById('form').submit();
            } 
        }

        document.getElementById("iframe").onload = function() {
            var doc = document.getElementById("iframe").contentWindow.document;
            var text = doc.body.getElementsByTagName('p')[0].innerHTML;
            document.getElementById("img").src=text;
        }
    </script>
</body>
</html>

解析：

  • file文件必须放在form里才能提交，ajax只能提交字段。
  • form的action指向跳转页面路径，target指向跳转页面返回的框架。 如果没有target，默认就是本页面刷新成action地址了，而把target赋给了一个隐藏的iframe，在这里面加载新页面，本页面不刷新
  • 加载完了后怎么获取iframe里的新内容呢？用onload，即上面的第二段代码。contentWindow.document

所以，页面预览的整个流程就是，将form的target指向隐藏的iframe，上传文件，后台返回图片的在线地址到iframe里，通过js 的onload获取iframe里的地址信息，插入预览的img src

 

iframe.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <p>http://img0.bdstatic.com/static/common/widget/search_box_search/logo/logo_3b6de4c.png</p>
    </body>
</html>

 

posted @ 2014-08-21 14:31  欧欧欧子  阅读(196)  评论(0)    收藏  举报