php表单传送到后台的,前端使用formdata异步上传form表单,以及后台(php)获取的详细教程,亲测可用.(附要源码）...

这篇文章主要介绍了前端使用formdata异步上传form表单,以及后台(php)获取的详细教程,亲测可用.(附要源码)，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

前端如果要异步提交一个表单那么,使用formdata方法提交是不错的选择.因为formdata可以将整个表单都提交包括提交表单中的

文件(这个是重点,很多其他方式不能完成).

前端的关键部分代码如下:

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

}

后台使用php,其他的语言可以参考思路是一样的 get.php<?php

$name = $_POST["name"];

$author = $_POST['author"];

$file = $_FILES["img"];

move_uploaded_file($file['tmp_name'], $file["name"]); //上传到和get.php同一级目录的服务器上

//至此,前端异步上传的name 和author 和 img 都已经取到.后续可以根据自己的需要去做其他事情

?>

遇到的坑:

如form.file.append("author", author)可以额外增加自己想要上传的值,但是author 数值和数组和字符串亲测可用,但是如果你是想要 增加个表单那是不行如 formfile.append("form", form) 在后台$_POST["form"]得到是 fromElementobject