Utilisez la fonctionnalité H5 FormData pour télécharger des fichiers sans actualiser-js tutoriel-php.cn

Utilisez la fonctionnalité H5 FormData pour télécharger des fichiers sans actualiser

亚连

Libérer： 2018-05-24 17:20:10

original

2027 Les gens l'ont consulté

Mon ami m'a déjà dit que les fichiers téléchargés ne devaient pas être actualisés. La solution la plus violente consiste à rechercher diverses bibliothèques JS sur Internet, qui permettent le téléchargement de plusieurs images, la prévisualisation et même le traitement d'images et d'autres effets spéciaux. Ci-dessous, je vais partager avec vous comment utiliser la fonctionnalité H5 FormData pour télécharger des fichiers sans actualiser. La solution la plus violente consiste à rechercher diverses bibliothèques JS sur Internet, qui permettent le téléchargement de plusieurs images, la prévisualisation et même le traitement d'images et d'autres effets spéciaux. Donc, si vous ne contactez pas de bibliothèques tierces, pouvez-vous utiliser ajax pour le faire ? Concernant ce problème, la solution proposée par quelqu'un est d'utiliser iframe, que je n'entrerai pas dans les détails ici. Mais Html5 est une bonne chose. Il fournit FormData qui peut nous aider à rassembler les paramètres et même les ressources de fichiers. De cette façon, nous pouvons facilement télécharger sans actualiser en utilisant $.ajax. Bien sûr, aucune iframe n’est nécessaire non plus.

Code

Ce qui suit est la partie frontale.

<!DOCTYLE html>
<meta charset=utf->
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/../jquery.min.js"></script>
</head>
<script type="text/javascript">
$(function(){
  $(&#39;#add&#39;).submit(function(){
    var data = new FormData($(&#39;#add&#39;)[]); 
    console.log(data);
    $.ajax({ 
      url: &#39;ajax.php&#39;, 
      type: &#39;POST&#39;, 
      data: data, 
      dataType: &#39;JSON&#39;, 
      cache: false, 
      processData: false, 
      contentType: false, 
      success:function(data){ 
        //alert(data);
        alert("UploadFile Success");
      }  
    }); 
    return false;  
  });
});
</script>
<form id=&#39;add&#39;>
<input type="text" name=&#39;book&#39;></input>
<input type="file" name=&#39;source&#39;></input>
<input type="submit">
</form>

Copier après la connexion

Sans entrer dans trop de détails sur le code à l'intérieur, je vais juste parler d'une ligne de code

var data = new FormData($(&#39;#add&#39;)[0]);

Copier après la connexion

FormData est un objet de formulaire, qui peut former une clé => valeur pour les champs de formulaire de l'objet de formulaire. Alors, devrions-nous créer nous-mêmes une clé supplémentaire =>valeur ? La réponse est oui. Les détails peuvent être trouvés dans Baidu FormData.

Et pourquoi est-ce $('#add')[0] ?

Je peux seulement dire js = jQuery[0];

Partie PHP

<?php 
  header(&#39;Content-Type:application/json; charset=utf-8&#39;);
  echo json_encode(array($_FILES,$_REQUEST));
?>

Copier après la connexion

Ceci est juste un test. Si nous pouvons voir quelque chose dans $_FILES, cela prouve que nous pouvons télécharger.

Test de téléchargement

Vous pouvez voir que la requête ajax va à ajax.php

Regardez l'aperçu et vous pouvez voir que $_FILES est renvoyé Informations associées.

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Utilisez la fonctionnalité H5 FormData pour télécharger des fichiers sans actualiser