XMLHttpRequest Level 2 添加了一个新的接口——FormData。它能使现在的AJAX交互更加简单。之前的AJAX在上传前，需要将表单的数据序列化。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
边学边做，我也尝试做了一个上传图片的功能，如果以前可能要使用form提交或其他黑魔法，现在使用FormData就可以实现。
但是FormData存在兼容问题，详细请查看：
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData#.E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7
异步上传二进制文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<form action="" id="testform">
<input type="file" name="file">
<input type="button" value="提交" id="subbtn">
</form>
<script>
var subbtn = document.getElementById("subbtn");
subbtn.onclick = function(){
var formElement = document.getElementById("testform");
var formData = new FormData(formElement);
$.ajax({
url: "1.php",
type: "POST",
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(data){
$("body").append(data);
}
});
};
</script>
</body>
</html>
<?php
if ($_FILES["file"]["error"] > 0)
{
echo "错误: " . $_FILES["file"]["error"] . "<br />";
}
else
{
echo "文件名: " . $_FILES["file"]["name"] . "<br />";
echo "类型: " . $_FILES["file"]["type"] . "<br />";
echo "大小: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "存储位置: " . $_FILES["file"]["tmp_name"];
}
?>
时间： 2024-10-21 05:38:39