通过隐藏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 相关文章推荐
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
babel基本使用详解
Feb 17 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 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 加密与解密的斗争
2009/04/17 PHP
php 数组使用详解 推荐
2011/06/02 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
微信小程序实现文字跑马灯
2020/05/26 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
layui的select联动实现代码
2019/09/28 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python实现嵌套列表去重方法示例
2017/12/28 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python对XML文件的操作实现代码
2020/03/27 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
JAVA高级程序员面试题
2013/09/06 面试题
函授大专自我鉴定
2013/11/01 职场文书
班长岗位职责
2013/11/10 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
自荐信范文
2019/05/20 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript