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

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

WBOY

Libérer： 2016-05-16 15:10:34

original

1584 Les gens l'ont consulté

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

Copier après la connexion

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();
},

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 !