900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > HTML上传文件(不跳转页面)

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

时间:2023-06-16 08:23:44

相关推荐

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

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元素中。

服务器端的代码我就不写了。

最后看下效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。