iframe 文件上传

原创于 2016-03-19 21:43:14 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #上传

工作笔记专栏收录该内容

23 篇文章

订阅专栏

文件上传实现方式主要有：

iframe
swf插件
html5

iframe实现步骤

获得上传文件提交动作
创建iframe
修改表单target指向
完场上传，移除iframe

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script type='text/javascript' href='http://libs.baidu.com/jquery/1.7.2/jquery.min.js'></script>
    <script>
        function ajaxup() {
            var ifname='up'+Math.random();
            $('<iframe name="'+ifname+'" width='0' height='0' frameborer='0'><iframe>').appendTo($('body'));
            $('form:first').attr('target',ifname);
            $('#progress').html('<img src="load.gif" />');
        }
    </script>
</head>
<body>
    <form action='up.php' method='post' enctype='multipart/form-data' onsubmit='return ajaxup();'>
        <div id='progress'></div>
        <p>
            <input type='file' name='pic'>
        </p>
        <p>
            <input type='submit' value='提交'>
        </p>

    </form>
</body>
</html>