通过隐藏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 相关文章推荐
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
php 修改密码实现代码
May 24 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
原生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提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php实现文件下载实例分享
2014/06/02 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python 深入理解yield
2008/09/06 Python
Python实现备份文件实例
2014/09/16 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
九华山导游词
2015/02/03 职场文书
初中化学教学反思
2016/02/22 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python