Melaksanakan operasi muat naik fail tanpa muat semula dengan menyembunyikan kemahiran iframe_javascript

Malah, sebelum ajax muncul, aplikasi web juga boleh menjadi bebas muat semula Pada masa itu, ini kebanyakannya dilakukan melalui IFrame. Sudah tentu, selepas Ajax muncul, orang ramai berpusu-pusu ke kem Ajax, dan iFrame menjadi kurang popular. Tetapi menggunakan iFrame untuk memuat naik fail tanpa menyegarkan sememangnya pilihan yang baik.

Penyelesaian adalah untuk mengendalikan operasi muat naik melalui iframe tersembunyi saya menggunakan ReactJS, amazeui, nodejs

Sasaran 1.html menghala ke nama iframe, yang bermaksud bahawa operasi muat naik diserahkan kepada iframe untuk diproses

<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.Pemprosesan JS menyerahkan borang selepas pemilihan fail

UploadSupplyer:function(){
var path = document.all.fileUp.value;
if(!path){return false;}
$('.loadinfo').html('<p>文件上传中...</p>').removeClass("none");
$('#supplyformFile').submit();
},

Pemprosesan pelayan 3.nodejs, kerana halaman pemprosesan ialah domain pelayan nodejs, terdapat masalah merentas domain dalam iframe, jadi anda perlu menggunakan kaedah postMessage H5 untuk menghantar parameter ke halaman borang di luar 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 memproses hasil muat naik

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);

Di atas adalah pengenalan editor kepada operasi memuat naik fail tanpa menyegarkan dengan menyembunyikan iframe. Saya harap ia akan membantu semua orang!