HTML上传文件(不跳转页面)

最新推荐文章于 2024-05-24 16:46:26 发布

半个雨天

最新推荐文章于 2024-05-24 16:46:26 发布

阅读量1.5w

点赞数 2

文章标签： html 文件上传

本文链接：https://blog.csdn.net/ling926/article/details/72888831

版权

HTML上传文件(不跳转页面)

点击上传按钮后，一般会跳转到表单action里的地址。在当前插入一个iframe标签，然后让表单target指向这个iframe标签即可。不bb，上代码：

html页面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传</title>
<script type="text/javascript" src="script/jquery-3.1.1.min.js"></script>
</head>
<body>
    <form id="form1" action="uploadFile.do" target="frame1" method="post" enctype="multipart/form-data">
        <input type="file" name="file"> 
        <input type="button" value="上传" onclick="upload()">
    </form>
    <iframe name="frame1" frameborder="0" height="40"></iframe>
    <!-- 其实我们可以把iframe标签隐藏掉 -->
    <script type="text/javascript">
        function upload() {
            $("#form1").submit();
            var t = setInterval(function() {
                //获取iframe标签里body元素里的文字。即服务器响应过来的"上传成功"或"上传失败"
                var word = $("iframe[name='frame1']").contents().find("body").text();
                if (word != "") {
                    alert(word);        //弹窗提示是否上传成功
                    clearInterval(t);   //清除定时器
                }
            }, 1000);
        }
    </script>
</body>
</html>

受上传文件大小、网速等影响，表单提交后不是马上就会得到服务器响应过来的信息。有可能我0.1秒就上传完了，也有可能是10秒。所以我在这里用到了定时器。从服务器反馈过来的信息会放在iframe标签里的body元素中。
服务器端的代码我就不写了。
最后看下效果图：

这里写图片描述

半个雨天

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
HTML上传文件(不跳转页面)

HTML上传文件(不跳转页面)点击上传按钮后，一般会跳转到表单action里的地址。在当前插入一个iframe标签，然后让表单target指向这个iframe标签即可。不bb，上代码：html页面代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>上传</title><script type="text/javascri
复制链接

扫一扫