FormData的作用：
FormData对象可以帮助我们自动的打包表单数据，通过XMLHttpRequest的send()方法来提交表单。当然FormData也可以动态的append数据。FormData的最大优点就是我们可以异步上传一个二进制文件。 例1如下：
<!DOCTYPE HTML><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body><form method="post" id="myForm" οnsubmit="return post();">用户名<input type="text" name="uname" />密码<input type="password" name="upwd" />邮箱<input type="text" name="uemail" /><input type="submit" name="submit" value="提交" /></form></body><script type="text/javascript">function post() {var myForm = document.getElementById("myForm");//FormData既可以从表单读取数据，也可以动态append(键,值)添加var fd = new FormData(myForm);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {alert(this.responseText);}};xhr.open("post", "post.php", true);xhr.send(fd);return false;}</script></html>
File API 使用HTML5 DOM新增的File API，现在可以让网页要求用户选择本地文件，并且读取这些文件的信息了。 通过File API，我们可以在用户选取一个或者多个文件之后，访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。
<!DOCTYPE HTML><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body><form method="post" id="myForm"><input type="file" name="file" id="upfile" /><input type="submit" name="submit" value="提交" /></form></body><script type="text/javascript">var upfile = document.getElementById("upfile");upfile.onchange = function() {var file = this.files[0];alert("文件名:" + file.name + "\r\n" + "大小:" + file.size + "\r\n");};</script></html>
我们通过FormData + File API 上传文件
<!DOCTYPE HTML><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body><form method="post" id="myForm"><input type="file" name="file" id="upfile" /><input type="submit" name="submit" value="提交" /></form></body><script type="text/javascript">var myForm = document.getElementById("myForm");var upfile = document.getElementById("upfile");myForm.onsubmit = function() {//我们创建一个FormData对象var fd = new FormData();var file = upfile.files[0];//把文件添加到FormData对象中fd.append("file", file);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {alert(this.responseText);}};xhr.open("post", "upfile.php", true);//发送FormData对象xhr.send(fd);return false;};</script></html>
upfile.php代码如下：
<?php$uploadDir = './upload/';if(!file_exists($uploadDir)) {@mkdir($uploadDir, 0777, true);}$uploadFile = $uploadDir . basename($_FILES['file']['name']);if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {echo "OK";} else {echo "NO";}
使用对象URL来显示你所选择的图片 通过window.URL.createObjectURL()和 window.URL.revokeObjectURL()两个DOM方法。 这两个方法创建简单的URL字符串对象，用于指向任何 DOM File 对象数据，包括用户电脑中的本地文件。
<!DOCTYPE HTML><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body><form method="post" id="myForm"><input type="file" name="file" id="upfile" /><input type="submit" name="submit" value="提交" /></form></body><script type="text/javascript">var myForm = document.getElementById("myForm");var upfile = document.getElementById("upfile");upfile.onchange = function() {//创建一个img标签var img = document.createElement("img");//通过file对象创建对象URLimg.src = window.URL.createObjectURL(this.files[0]);img.height = 60;img.onload = function() {//释放对象URLwindow.URL.revokeObjectURL(this.src);};document.body.appendChild(img);};myForm.onsubmit = function() {//我们创建一个FormData对象var fd = new FormData();var file = upfile.files[0];//把文件添加到FormData对象中fd.append("file", file);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {alert(this.responseText);}};xhr.open("post", "upfile.php", true);//发送FormData对象xhr.send(fd);return false;};</script></html>
