通过隐藏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 isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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源码之explode使用说明
2011/08/05 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
python通过socket查询whois的方法
2015/07/18 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python使用turtle库绘制树
2018/06/25 Python
详解python UDP 编程
2020/08/24 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
营业员演讲稿
2013/12/30 职场文书
生日邀请函范文
2014/01/13 职场文书
中学生运动会入场词
2014/02/12 职场文书
2014年创卫实施方案
2014/02/18 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
怎样写家长意见
2015/06/04 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis