Téléchargez des fichiers sans actualiser et renvoyez des valeurs personnalisées

Cet article partage brièvement avec vous les méthodes et exemples permettant de résoudre le problème du téléchargement de fichiers sans rafraîchissement dans les projets personnels. Les amis dans le besoin peuvent s'y référer.

J'ai rencontré un tel problème lors du processus de développement aujourd'hui : Excel doit être téléchargé sur le serveur pour être analysé, mais lorsque le document est inapproprié, j'espère que la page ne sera pas actualisée pour indiquer à l'utilisateur que le le document est inapproprié. Après avoir longuement réfléchi, j'ai trouvé beaucoup d'informations sur Internet et j'ai finalement réussi l'expérience. Je vais partager la méthode de traitement ici :

Tout d'abord, permettez-moi de parler de l'idée de traitement : ajoutez une iframe cachée à la page et définissez l'attribut cible du formulaire sur l'identifiant de l'iframe, de sorte que lorsque le formulaire est soumis, le fichier Excel soit transmis en arrière-plan sous la forme d'un flux de fichier personnalisé. les opérations peuvent être effectuées après l'avoir reçu en arrière-plan. Les informations renvoyées seront affichées dans l'iframe sans sauter Avant que l'iframe soit masquée, donc la page ne changera pas. Ensuite, nous devons surveiller les changements dans le contenu de l'iframe, puis. transmettez le contenu à la méthode JS dans la fenêtre principale pour la prochaine étape du traitement personnalisé.

Le code de la page est le suivant :

<form id="input" action="importExcel.jhtml" method="post" enctype="multipart/form-data" target="hiddenIFrame">
　　<input id="excelFile" name="file" type="file" />
　　<input type="submit" class="button" value="导入excel"/>
</form>
<iframe id=&#39;hiddenIFrame&#39; name=&#39;hiddenIFrame&#39; style="display:none;"></iframe>

Le code JS est le suivant (jqeury doit être introduit) :

$(function(){
  $("#hiddenIFrame").load(function(){
    var wnd = this.contentWindow;
    var str = $(wnd.document.body).html();
    callback(str);
  });
})
 
function callback(info){
  alert(info);
}

Le code d'arrière-plan ne sera pas présenté en détail. Tout comme la soumission traditionnelle, l'arrière-plan obtiendra un flux de fichier du même nom en fonction de la valeur du nom du composant d'entrée (par exemple). Par exemple, le nom du composant d'entrée dans le code de la page ci-dessus est fichier, puis l'arrière-plan reçu est un flux de fichiers nommé fichier), et vous pouvez effectuer des opérations personnalisées après l'avoir reçu.

Pour plus de didacticiels connexes, veuillez visiter le Tutoriel JavaScript