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元素中。
服务器端的代码我就不写了。
最后看下效果图：

HTML上传文件(不跳转页面)相关推荐

让UpdatePanel支持上传文件：解决当页面显式设置document.domain时提示的500错误
最近在做一个项目,需要在UpdatePanel中上载文件,在网络上找了一下,发现有老赵写的AjaxUploadHelper,一开始工作的很好:开发时使用localhost来进行测试的,一切正常:但部署 ...
spring2.5 mvc使用注解upload上传文件
对于spring mvc来说2.0以后大量使用注解确实简单很多,最近在一个项目使用spring mvc遇到上传文件问题,由于使用了注解所以网上没有找到相关使用注解上传文件的.官方文档又没有更新都是老的 ...
ajaxSubmit来上传文件
首先需要的是jquery.form.js这个js文件,网上可以直接下载然后就是最重要的了,添加这个js文件后jquery.js就不能用了,只能用jquery.min.js这个js文件.不然会冲突,一 ...
vue+elementui 同时有上传文件和批量上传文件功能，上传文件或批量上传文件后必须刷新才能再次上传文件
报错描述: 使用element-ui的上传文件组件写一个批量上传和上传文件,但是发现每次上传文件后或者批量上传文件后,不能再次上传文件或者批量上传文件.只有进入页面第一次点击上传文件或者批量上传文件才 ...
asp.net 如何用webclient上传文件
在服务器A中我们可以编写如下代码: <%@ Page Language="C#" EnableSessionState="ReadOnly" Async= ...
风尚云网学习-H5+css3+js上传文件页面提交不跳转
风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图: 众所周知,from表单提交后会自动跳转url, 此时我们可以用一个空的frame 接收,阻止跳转废话不多说,上全部代码: < ...
上传文件页面回显_数据回显、删除以及excel导出
数据回显当点击某个按钮跳转某个页面之前,发送请求到后台进行数据查询,最后将查询结果返回给前端页面,前端页面获取数据,最后呈现出来的效果是就回显的效果. 示例代码: 前端代码: Controller ...
spring mvc + ajax上传文件，页面局部刷新
1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...
python-flack(一)登陆页面、注册页面、主页页面、登陆用户信息页面、上传文件页面
文章目录 1.flask项目静态文件的导入 2.flask链接的导入 3.消息闪现 1. 如何实现闪现? 2. html代码中如何调用闪现内容? 4.Flask中集成bootstrap 1. 什么是B ...

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

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

HTML上传文件(不跳转页面)相关推荐

最新文章

热门文章