Home > Backend Development > PHP Tutorial > 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)

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)

不言
Release: 2023-03-24 11:04:01
Original
9577 people have browsed it

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>
Copy after login


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 都已经取到.后续可以根据自己的需要去做其他事情
?>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template