您好,欢迎访问一九零五行业门户网

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

其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过iframe来做到这一点。当然ajax出现之后,人们一窝蜂地投奔ajax 的阵营了,iframe 就乏人问津了。但是用iframe来实现无刷新上传文件确实一个很好的选择。
解决办法是通过一个隐藏的iframe来处理上传操作我采用的是reactjs,amazeui,nodejs
1.html target指向iframe的name,就是把上传后的操作交给iframe来处理.
选择要上传的文件

2.js处理当文件选择后提交form
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外面的表单页面
var fname = req.files.fileup.path.replace(publicfiles, ).replace(public/files/, );res.writehead(200, {'content-type' : 'text/html'});res.write('');
4.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实现无刷新上传文件操作,希望对大家有所帮助!
其它类似信息

推荐信息