The front-end uses formdata to asynchronously upload the form form, and the detailed tutorial obtained from the backend (php) is available for personal testing. (Source code attached)

This article mainly introduces the front-end use of formdata to asynchronously upload form forms, as well as the detailed tutorials obtained by the backend (php), which can be used for personal testing. (Source code is attached), which has certain reference value. Now I will share it with you if you need it. Friends can refer to

If the front-end wants to submit a form asynchronously, it is a good choice to use the formdata method to submit. Because formdata can submit the entire form including the

files in the submission form ( This is the key point, many other methods cannot be completed).

The key part of the front-end code is as follows:

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

The background uses php, other languages ​​​​can refer to the ideas It’s the same get.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 都已经取到.后续可以根据自己的需要去做其他事情
?>

The pitfalls encountered:

For example, form.file.append("author", author) can add additional values ​​​​that you want to upload, but the author value It is available for personal testing with arrays and strings, but if you want to add a form, it will not work. For example, formfile.append("form", form) in the background $_POST["form"] will get fromElementobject

The above is the detailed content of The front-end uses formdata to asynchronously upload the form form, and the detailed tutorial obtained from the backend (php) is available for personal testing. (Source code attached). For more information, please follow other related articles on the PHP Chinese website!