Implémentation d'une opération de téléchargement de fichiers sans actualisation en masquant les compétences iframe_javascript

En fait, avant l'apparition d'Ajax, les applications Web pouvaient également être sans actualisation. À cette époque, cela se faisait principalement via IFrame. Bien sûr, après l’apparition d’Ajax, les gens ont afflué vers le camp d’Ajax et iFrame est devenu moins populaire. Mais utiliser iFrame pour télécharger des fichiers sans les actualiser est en effet un bon choix.

La solution est de gérer l'opération de téléchargement via une iframe cachée. J'utilise ReactJS, amazeui, nodejs

La cible 1.html pointe vers le nom de l'iframe, ce qui signifie que l'opération de téléchargement est transmise à l'iframe pour traitement

.

<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" />

Le traitement 2.JS soumet le formulaire après la sélection du fichier

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

Traitement du serveur 3.nodejs, étant donné que la page de traitement est le domaine du serveur nodejs, il y a des problèmes inter-domaines dans l'iframe, vous devez donc utiliser la méthode postMessage H5 pour transmettre les paramètres à la page de formulaire en dehors du 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 traitant les résultats du téléchargement

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

Ce qui précède est l'introduction de l'éditeur à l'opération de téléchargement de fichiers sans actualiser en masquant l'iframe. J'espère que cela sera utile à tout le monde !