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

前端技术 2023/09/05 JavaScript

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

本文地址：https://www.stayed.cn/item/14197

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案