单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。
FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。
你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：var oMyForm = new FormData();
html+javascript代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FormData</title> </head> <body> <form name="form1" id="form1"> <p>name:<input type="text" name="name" ></p> <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p> <p>photo:<input type="file" name="photo" id="photo"></p> <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p> </form> <div id="result"></div> </script> <script type="text/javascript"> function fsubmit() { var form=document.getElementById("form1"); var formData=new FormData(form); var oReq = new XMLHttpRequest(); oReq.onreadystatechange=function(){ if(oReq.readyState==4){ if(oReq.status==200){ var json=JSON.parse(oReq.responseText); var result = ''; // result += 'name=' + ret['name'] + '<br>'; // result += 'gender=' + ret['gender'] + '<br>'; result += '<img src="' + json['photo'] + '" width="100">'; document.getElementById('#result').innerHTML = result; } } } oReq.open("POST", "server.php"); oReq.send(formData); return false; } </script> </body> </html>
//php代码
<?php $name = isset($_POST['name'])? $_POST['name'] : ''; $gender = isset($_POST['gender'])? $_POST['gender'] : ''; $filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.')); $response = array(); if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){ $response['isSuccess'] = true; $response['name'] = $name; $response['gender'] = $gender; $response['photo'] = $filename; }else{ $response['isSuccess'] = false; } echo json_encode($response); ?>
PS:在用FromData发送数据时，input type="button" 不会被提交。因此如果php接收数据时，避免用button中的name值做来源判断。