Das Front-End verwendet Formulardaten, um das Formular asynchron hochzuladen, und das detaillierte Tutorial aus dem Hintergrund (PHP) steht zum persönlichen Testen zur Verfügung (Quellcode beigefügt).

In diesem Artikel wird hauptsächlich die Front-End-Verwendung von Formdata zum asynchronen Hochladen von Formularformularen vorgestellt, außerdem werden die detaillierten Tutorials vorgestellt, die vom Backend (PHP) erhalten werden und für persönliche Tests verwendet werden können (Quellcode beigefügt). Bestimmter Referenzwert, und jetzt werde ich ihn bei Bedarf mit Ihnen teilen.

Wenn das Frontend ein Formular asynchron senden möchte, ist es eine gute Wahl, die Formdata-Methode zu verwenden Da formdata das gesamte Formular einschließlich der

-Datei im Übermittlungsformular senden kann (dies ist der entscheidende Punkt, viele andere Methoden können ihn nicht vervollständigen).

Der wichtigste Teil der Vorderseite: Der Endcode lautet wie folgt:

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

Das Backend kann PHP verwenden, andere Sprachen können verwendet werden. Die Referenzidee ist die gleiche, auf die get stößt .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 都已经取到.后续可以根据自己的需要去做其他事情
?>

:

Form.file.append("author", author) kann beispielsweise zusätzliche Werte hinzufügen, die Sie hochladen möchten, aber „author“. Werte, Arrays und Zeichenfolgen sind im persönlichen Test verfügbar, aber wenn Sie ein Formular hinzufügen möchten, funktioniert es nicht. Beispielsweise wird formfile.append("form", form) im Hintergrund $_POST["form"] erhalten fromElementobject

Das obige ist der detaillierte Inhalt vonDas Front-End verwendet Formulardaten, um das Formular asynchron hochzuladen, und das detaillierte Tutorial aus dem Hintergrund (PHP) steht zum persönlichen Testen zur Verfügung (Quellcode beigefügt).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!