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

其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点。当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。

解决办法是通过一个隐藏的iframe来处理上传操作我采用的是ReactJS,amazeui,nodejs

1.html target指向iframe的name,就是把上传后的操作交给iframe来处理.

rush:js;">
选择要上传文件

2.JS处理当文件选择后提交form

rush:js;"> UploadSupplyer:function(){ var path = document.all.fileUp.value; if(!path){return false;} $('.loadinfo').html('

文件上传中...

').removeClass("none"); $('#supplyformFile').submit(); },

3.nodejs服务器处理,因为处理页面是nodejs服务器域,iframe中存在跨域的问题,所以需要用到H5的postMessage方法来传递参数给iframe外面的表单页面

rush:js;"> var fname = req.files.fileUp.path.replace("publicfiles","").replace("public/files/",""); res.writeHead(200,{'Content-type' : 'text/html'}); res.write('');

4.JS处理上传结果

rush:js;"> window.addEventListener('message',function(e){ var fname=e.data; $('#supplyfile').val(fname); $(".loadinfo").addClass("none"); $(".successinfo").html("

文件上传成功

").removeClass("none"); setTimeout(function() { $(".successinfo").addClass("none");},2000); $("#supplyfile_div").html(' '); },false);

以上所述是小编给大家介绍的通过隐藏iframe实现无刷新上传文件操作,希望对大家有所帮助!

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...