通过隐藏iframe实现无刷新上传文件操作


Posted in Javascript onMarch 16, 2016

其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点。当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。

解决办法是通过一个隐藏的iframe来处理上传操作我采用的是ReactJS,amazeui,nodejs

1.html target指向iframe的name,就是把上传后的操作交给iframe来处理.

<form id="supplyformFile" name="formFile" method="post" target="frameFile"
encType="multipart/form-data">
<div className="am-form-file">
<button type="button" className="am-btn am-btn-default am-btn-sm">
<i className="am-icon-cloud-upload"></i> 选择要上传的文件
</button>
<input type="file" id="fileUp" onChange={this.UploadSupplyer} name="fileUp" />
</div> 
<div id="supplyfile_div"></div>
</form>
<iframe id="frameFile" name="frameFile" style={{display: 'none'}}></iframe>
<input type="hidden" id="supplyfile" />

2.JS处理当文件选择后提交form

UploadSupplyer:function(){
var path = document.all.fileUp.value;
if(!path){return false;}
$('.loadinfo').html('<p>文件上传中...</p>').removeClass("none");
$('#supplyformFile').submit();
},

3.nodejs服务器处理,因为处理页面是nodejs服务器域,iframe中存在跨域的问题,所以需要用到H5的postMessage方法来传递参数给iframe外面的表单页面

var fname = req.files.fileUp.path.replace("publicfiles", "").replace("public/files/", "");
res.writeHead(200, {'Content-type' : 'text/html'});
res.write('<script>');
res.write('window.parent.postMessage("'+fname+'","*");');
res.end('</script>');

4.JS处理上传结果

window.addEventListener('message',function(e){
var fname=e.data;
$('#supplyfile').val(fname);
$(".loadinfo").addClass("none");
$(".successinfo").html("<p>文件上传成功</p>").removeClass("none");
setTimeout(function() { $(".successinfo").addClass("none");}, 2000);
$("#supplyfile_div").html('<span class="am-icon-file-o"></span> <a target="_blank" href="'+hosts+'/files/'+fname+'">供应商确认单</a>');
},false);

以上所述是小编给大家介绍的通过隐藏iframe实现无刷新上传文件操作,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
React diff算法的实现示例
Apr 20 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
原生JS实现平滑回到顶部组件
Mar 16 #Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 #Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 #Javascript
JavaScript隐式类型转换
Mar 15 #Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 #Javascript
Angularjs整合微信UI(weui)
Mar 15 #Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 #Javascript
You might like
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
javascript引导程序
2008/10/26 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python文本数据处理学习笔记详解
2019/06/17 Python
解决yum对python依赖版本问题
2019/07/05 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
个人简历中自我评价
2014/02/11 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
青年志愿者活动感想
2015/08/07 职场文书
《确定位置》教学反思
2016/02/18 职场文书
高中地理教学反思
2016/02/19 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Nginx的gzip相关介绍
2022/05/11 Servers