通过隐藏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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
使用AOP改善javascript代码
May 01 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
实例讲解JS中pop使用方法
2019/01/27 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python 中的int()函数怎么用
2017/10/17 Python
python ansible服务及剧本编写
2017/12/29 Python
python实现AES加密和解密
2019/03/27 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
制定岗位职责的原则
2013/11/08 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
导游词之五台山
2019/10/11 职场文书