使用iframe无刷新上传文件，并获取返回值

最新推荐文章于 2022-06-19 15:36:50 发布
最新推荐文章于 2022-06-19 15:36:50 发布
阅读量6.8k 收藏 4
点赞数 1
分类专栏： web 文章标签： spring mvc 表单 iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niechangxu1994/article/details/50373505
版权
本文介绍了在Spring MVC项目中如何利用iframe实现无刷新上传文件，并详细解析了jsp、js和后台java代码实现过程，包括如何获取上传后的返回值。在jsp中设置form表单，js中定义处理函数，后台java代码处理文件上传并返回响应。
摘要由CSDN通过智能技术生成

使用iframe无刷新上传文件，并获取返回值

项目中需要完成这样一个功能

新增一个用户，填写他的基本信息，并且还要上传他的头像，头像可以预览

项目使用springmvc开发的，还不是很了解，所以做的有点慢，不过总算是做出来了，应该还会有更好的方式

大致上遇到了两个问题
1. 怎么无刷新上传文件，有用ajax的，但是感觉有点麻烦，而且后台代码不会写,所以选择了iframe…
2. 怎么获取表单submit之后的返回值, 在js代码中的 uploadOnload()方法中细说

1. jsp代码

<div id="img">
</div>
<iframe name="ajaxUpload" onload="uploadOnload()" style="display:none"></iframe>
<form id="fileForm" style="margin-left:150px" name="fileForm" action="uploadHeader.do" method="
最低0.47元/天 解锁文章
曾经最动心
关注
专栏目录
html表单获取后台数据,使用form表单提交请求如何获取后台返回的数据？
weixin_29138345的博客
06-05 6910
问题描述一般的form表单提交是单向的：只能给服务器发送数据，但是无法获取服务器返回的数据，也就是无法读取HTTP应答包。想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦。解决方法方法一：jQuery封装了一个form表单提交有回调功能的方法导入jqueryjquery-form.js如下: 一个上传文件的form请选择头像:js实现// $(function ())是文...
父页面得到iframe的数据和iframe页面得到父页面的数据.txt
08-21
父页面得到iframe的数据和iframe页面得到父页面的数据.txt
获取iframe返回值
windowsliusheng的专栏
06-13 4898
主页面： function ShowSubInfo(szValue) {     alert("iframe子页面返回值为："+ szValue); } iframe中子页面这样： var aaa = "123456";   window.onload = function() {      parent.ShowSubInfo("123");     parent.Sho
iframe无刷新跨域上传文件并获取返回值
lrz1011的专栏
08-27 7926
无网不剩 retweet iframe无刷新跨域上传文件并获取返回值 通常我们会有一个统一的上传接口，这个接口会被其他的服务调用。如果出现不同域，还需要无刷新上传文件，并且获取返回值，这就有点麻烦了。比如，新浪微博启用了新域名www.weibo.com，但接口还是使用原来的域：picupload.t.sina.com.cn。 研究了一下新浪微博的处理方法，这里大概演示一下。 首先是一个
图片上传 预览 已经无刷新上传
erjian666的博客
05-23 400
&lt;input type="file" name="image[0]" id="doc" onchange="javascript:setImagePreview();"&gt;                                             &lt;div class="page_one_imgin"  id="localImag"&a
跨域下调用iframe里面的方法并返回值
TetaiSon的博客
03-06 1583
一个域：9080，一个域：8082 思路：在8082端口创建一个代理页面，在9080端口直接使用iframe访问这个代理页面，这个代理页面再调用8082的功能方法。再9080端口也创建一个代理页面，8082的功能方法执行结束之后调用9080这个代理页面，并把值传到9080的代理页面，然后9080再进行下一步操作. 1、在父窗口（9080端口）下点击按钮，执行下面方法，生成一个iframe...
form+iframe解决跨域上传文件的方法
11-28
这是因为HTML的`<form>`元素与`<iframe>`结合使用可以实现异步无刷新的数据提交，而`<iframe>`能够承载另一个源的页面，从而规避同源策略的限制。 首先，我们来解析一下给出的`jsp`代码片段。这个`jsp`页面定义了一...
Form表单提交下载文件并监控下载状态
chern1992的博客
01-11 6505
下载 recordsClick(){//导出表格     var params = {// 参数         id：xx,         name:xx     };     var form = document.createElement('form')     form.id = 'form'     form.name = 'form'     document.body.ap...
nodejs + multer 实现文件上传与下载
Maci_yera的博客
05-10 9456
1.介绍 做了一个关于文件上传和下载的demo ，选择了Multer 作为中间件进行数据处理。关于multer请参考中文翻译文档 https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md 或者官方文档 2. upload 文件上传 html form标签内设置enctype=”multipart/form-dat...
文件上传,iframe跨域数据提交的实现
11-27
1、文件上传，图片上传，第三方uploadify插件，http://www.uploadify.com/about/ 2、用iframe上传文件，提交表单，主要思路就是：  a、js创建form表单，iframe，添加到body里，form的target要和iframe的name一致。  b、form表单里更新数据，submit提交  c、如果上传文件，图片，form里面添加 input-file 元素，绑定onchange事件，js触发，在onchange里面添加submit事件  d、关于回调：iframe提交成功后，返回的数据在iframe子页面的里面，可以这样获取，需要拆分： $ifr
jsp 页面如何异步取得iframe返回来的数据？（转）
programloverjack的专栏
09-28 376
jsp 页面如何异步取得iframe返回来的数据？  浏览次数：319次悬赏分：0 | 提问时间：2010-12-24 17:15 | 提问者：角落里的主角 | 问题为何被关闭   我的index.jsp页面代码： &lt;form action="uploadAttaches.jsp" method="post" enctype="multipart/form-data" target...
Struts 2 jsp 页面iframe子页面提交表单后返回父页面
07-16 737
@描述：父页面parent.jsp中使用iframe添加子页面src 添加子页面son.jsp &lt;iframe ID="testIframe" Name="testIframe"  src='son.jsp'&gt;&lt;/iframe&gt;   一、解决方法：在子页面son.jsp 页面的form 表单属性中加入    target=‘_parent’   struts.xml...
jsp中iframe在子页面和父页面之间传值
超人的博客
11-17 3426
基础：在父jsp上弹出，和子jsp交互： 1.在子jsp中获取父jsp中id的值var parentdb = parent.window.$("#id");2.在子jsp中获取父jsp中样式，或克隆样式：var classdb1 = parent.window.$("#divId"); var classdb2 = parent.window.$("#divId").clone(); //克隆ca
JSP中使用Iframe的技巧
lz12666的博客
10-23 5171
JSP中使用Iframe的技巧 JSP中使用Iframe的技巧（待看） (2012-07-17 23:33:39)转载▼ 标签： it 　src：文件的路径，既可是HTML文件，也可以是文本、asp等； 　width、height："画中画"区域的宽与高； 　scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现...
iframe实现无刷新上传下载
10-21 7798
最近我维护的网站在审核时加了个上传下载的功能，能上传多个文件（文件很小、不超过3个、上传时可以多选、且要有上传进度），下载时有选择的下载。页面是用aspx做的，微软自带的只有单文件上传，于是乎想到flash。找了三个现成的，测试发现一个不兼容IE9，另两个都通过了，但发现有点山寨，flash是封装好的，一个上面有广告，一个是英文的，既是封装的，我也不知道里面到底干了什么，也没想去看As语言的语法。
iframe简单使用 、获取iframe 、获取iframe 元素值 、iframe获取父页面的信息
m0_63348818的博客
06-19 4万+
标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 注意：URL建议用绝对路径 如果一个页面里面有框架，点页面里的连接，要求在这个 里打开。在中规定name 然后在修改默认打开模式，：网页head中加上或部分连接的目标框架设为（**）要插入一个页面。要求只拿中间一部分。其他的都不要。代码： 控制插入页被框架覆盖的深度 控制框架覆盖上部分的深度 scrolling滚动条要否（auto、yes、no） frameborder框架的边框大小，width=776 height=2
使用Ajax与IFrame实现无刷新文件上传
文中提到，在Ajax出现之前，IFrame常用于实现无刷新的文件上传，而Ajax流行后，IFrame的使用减少。尽管如此，IFrame仍然是实现文件上传的一个有效且实用的选择，如Gmail在上传文件时依然使用IFrame。本文将利用jsp来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值