Implementierung eines aktualisierungsfreien Datei-Upload-Vorgangs durch Ausblenden von iframe_javascript-Kenntnissen

Tatsächlich konnten Webanwendungen vor dem Erscheinen von Ajax auch aktualisierungsfrei sein. Damals erfolgte dies hauptsächlich über IFrame. Natürlich strömten nach dem Erscheinen von Ajax die Leute in das Ajax-Lager und iFrame wurde weniger beliebt. Aber die Verwendung von iFrame zum Hochladen von Dateien ohne Aktualisierung ist in der Tat eine gute Wahl.

Die Lösung besteht darin, den Upload-Vorgang über einen versteckten Iframe abzuwickeln. Ich verwende ReactJS, amazeui, nodejs

1.html-Ziel verweist auf den Namen des Iframes, was bedeutet, dass der Upload-Vorgang zur Verarbeitung an den Iframe übergeben wird

<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-Verarbeitung sendet das Formular nach der Dateiauswahl

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

3.nodejs-Serververarbeitung: Da die Verarbeitungsseite die Nodejs-Serverdomäne ist, gibt es domänenübergreifende Probleme im Iframe. Daher müssen Sie die H5-postMessage-Methode verwenden, um Parameter an die Formularseite außerhalb zu übergeben 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 verarbeitet Upload-Ergebnisse

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

Das Obige ist die Einführung des Herausgebers zum Hochladen von Dateien ohne Aktualisierung durch Ausblenden von Iframe. Ich hoffe, es wird für alle hilfreich sein!