HTML上传文件(不跳转页面)
来源:互联网 发布:教育软件 麦田 编辑:程序博客网 时间:2024/06/11 11:22
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元素中。
服务器端的代码我就不写了。
最后看下效果图:
阅读全文
0 0
- HTML上传文件(不跳转页面)
- 利用FormData上传文件不跳转页面
- jquery.form 上传文件,且完成后页面不跳转
- java鬼混笔记:jsp上传文件不跳转页面
- Spring MVC 实现文件上传及压缩包上传(提交之后页面不跳转)
- HTML提交表单不跳转页面
- jspsmart实现页面不跳转上传和下载文件(一)
- jspsmart实现页面不跳转上传和下载文件(二)
- form实现图片批量上传+不跳转页面
- html页面不兼容的提示与跳转
- html 提交表单,但不跳转页面处理返回值
- html 静态页面js文件不刷新
- html页面内跳转
- HTML之--------页面跳转
- HTML页面跳转
- HTML页面跳转
- HTML页面跳转
- HTML页面连接跳转
- 测试过的在mac上装Nginx
- 输入法的弹出与消除
- 深入浅出ES6---第二篇
- PAT 1019 General Palindromic Number(进制水题)
- 跟我一起写 Makefile(九)
- HTML上传文件(不跳转页面)
- linux动态库so的运用
- 最小生成树-Kruskal算法
- 获取java中jvm启动的线程信息
- IAR调试stm8的优化设置
- 三位数
- 在Mac上编译运行C++
- MySQL事务处理
- 头文件 <ctype.h> 以及函数 isalpha() tolower()