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

 更新时间:2016年03月16日 10:07:11   作者:隔壁陈叔叔  
本文给大家介绍iframe无刷新上传文件,通过一个隐藏的iframe来处理上传操作我采用的是ReactJS,amazeui,nodejs1.html target指向iframe的name,就是把上传后的操作交给iframe来处理

其实在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实现无刷新上传文件操作,希望对大家有所帮助!

相关文章

  • 百度小程序之间的页面通信过程详解

    百度小程序之间的页面通信过程详解

    这篇文章主要介绍了百度小程序之间的页面通信,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JavaScript实现的简单幂函数实例

    JavaScript实现的简单幂函数实例

    这篇文章主要介绍了JavaScript实现的简单幂函数,实例分析了javascript实现幂运算的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • javascript截取字符串小结

    javascript截取字符串小结

    本文章收藏了多种字符截取的方法,包括常用的js截取字符串,截取字符串函数及常用的截取使用,非常的简单实用,有需要的小伙伴可以参考下。
    2015-04-04
  • Layui表格监听行单双击事件讲解

    Layui表格监听行单双击事件讲解

    今天小编就为大家分享一篇Layui表格监听行单双击事件讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • JS实现页面长时间不操作退出到登录页面的示例代码

    JS实现页面长时间不操作退出到登录页面的示例代码

    这篇文章主要介绍了JS实现页面长时间不操作退出到登录页面的示例代码,通过在head标签中引入jquey和页面长时间不操作的js页面,结合实例代码讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • 发布一个基于javascript的动画类 Fx.js

    发布一个基于javascript的动画类 Fx.js

    支持大部分CSS3属性的动画(可能要指定详细的属性值)。
    2010-11-11
  • uniapp打包成微信小程序的详细过程

    uniapp打包成微信小程序的详细过程

    微信小程序的出现给我们提供了一种使用应用的新方式和体验,下面这篇文章主要给大家介绍了关于uniapp打包成微信小程序的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 详解如何在Javascript中使用Object.freeze()

    详解如何在Javascript中使用Object.freeze()

    这篇文章主要介绍了详解如何在Javascript中使用Object.freeze(),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 鸿蒙JS实战之计算器功能开发实例

    鸿蒙JS实战之计算器功能开发实例

    这篇文章主要给大家介绍了关于鸿蒙Js实战之计算器功能开发的相关资料,计算器是我们生活中经常使用的应用,此项目是基于Harmony实现的简易计算器,需要的朋友可以参考下
    2024-02-02
  • webpack4的迁移的使用方法

    webpack4的迁移的使用方法

    本篇文章主要介绍了webpack4的迁移的使用方法,主要介绍了如何从webpack1.x升级到4.x,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论