Heim > Web-Frontend > js-Tutorial > Implementierung eines aktualisierungsfreien Datei-Upload-Vorgangs durch Ausblenden von iframe_javascript-Kenntnissen

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

WBOY
Freigeben: 2016-05-16 15:10:34
Original
1583 Leute haben es durchsucht

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" />
Nach dem Login kopieren
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();
},
Nach dem Login kopieren
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>');
Nach dem Login kopieren
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);
Nach dem Login kopieren
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!
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage