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