Le front-end utilise formdata pour télécharger de manière asynchrone le formulaire, et le didacticiel détaillé obtenu à partir du backend (php) est disponible pour des tests personnels (code source ci-joint).

不言
Libérer: 2023-03-24 11:04:01
original
9552 Les gens l'ont consulté

Cet article présente principalement l'utilisation frontale de formdata pour télécharger des formulaires de manière asynchrone, ainsi que les didacticiels détaillés obtenus à partir du backend (php), qui peuvent être utilisés pour des tests personnels (code source ci-joint). certaine valeur de référence, et maintenant je la partagerai avec vous si vous en avez besoin. Les amis peuvent se référer à

Si le front-end souhaite soumettre un formulaire de manière asynchrone, c'est un bon choix d'utiliser la méthode formdata pour soumettre. Parce que formdata peut soumettre l'intégralité du formulaire, y compris le fichier

dans le formulaire de soumission (c'est le point clé, de nombreuses autres méthodes ne peuvent pas le compléter).

La partie clé du front- le code de fin est le suivant :

<form id="form"  method="post" enctype="multipart/form-data">
<input type="text" name="name" />
<input type="file" name=img />
<input type="button" onclick="submit()"/>
</form>
<script>
function submit(){

var myform  = document.getElementById("form")
var formfile = new FormData(myform);
var author = ["sony", "god", "JB"];
formfile.append("author",  author);    //此处是在原表单上在增加一些字段, 后端用$_POST["author"]就可以取得相应的值
var xml = new XMLHttpRequest();
xml.onreadystatechange =  function(){
        if(xml.readyState == 4 &&  xml.status == 200){
                var result = JSON.parse(xml.responseText);
               console.log(result) //在打印台就可以看到相应的表单值
        }
}
xml.open("POST",  "你要提交到那个服务器地址", true);
xml.send( formfile );
}
</script>
Copier après la connexion


Le backend peut utiliser php, d'autres langages​​peuvent être utilisés L'idée de référence est la même. .php

<?php 
$name = $_POST["name"];
$author = $_POST[&#39;author"];
$file = $_FILES["img"];
move_uploaded_file($file[&#39;tmp_name&#39;], $file["name"]);  //上传到和get.php同一级目录的服务器上
//至此,前端异步上传的name 和author 和 img 都已经取到.后续可以根据自己的需要去做其他事情
?>
Copier après la connexion

 :

Par exemple, form.file.append("author", author) peut ajouter des valeurs supplémentaires​​que vous souhaitez télécharger, mais author. les valeurs, les tableaux et les chaînes sont disponibles dans les tests personnels, mais si vous souhaitez ajouter un formulaire, cela ne fonctionnera pas. Par exemple, formfile.append("form", form) en arrière-plan $_POST["form"] obtiendra. fromElementobject



Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!