摘自《JavaScript高级程序设计》
并非所有浏览器都完整地实现了XMLHttpRequest2级规范，但所有浏览器都实现了它规定的部分内容 。
现代Web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据（用于通过XHR传输）提供了便利。下面的代码创建了一个FormData对象，并向其中添加了一些数据。
var data = new FormData();
data.append("name", "Nicholas");
这个append()方法接收两个参数：键和值，分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。而通过向FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对儿：
var data = new FormData(document.forms[0]);
创建了FormData的实例后，可以将它直接传给XHR的send()方法，如下所示：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful:" + xhr.status);
}
}
};
xhr.open("post", "postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。
支持FormData的浏览器有Firefox4+、Safari5+、Chrome和Android3+版WebKit。
接下来是利用XMLHttpRequest上传文件实现进度条的例子：
（摘自http://www.cnblogs.com/tianyuchen/p/5594641.html和自己项目代码的结合）
<script type="text/javascript">
//上传文件方法
function uploadFile() {
var fileObj = document.getElementById("file").files[0]; //js获取文件对象
var url = "uploadFile"; //接收上传文件的后台地址
var form = new FormData(); //创建一个FormData对象
form.append("mf", fileObj); //向FormData对象里添加数据
var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
xhr.onabort = uploadCanceled; //取消上传
xhr.upload.onprogress = uploadProgress; //上传进度调用方法实现
xhr.open("post", url, true); //post方式提交，url为服务器请求地址，true该参数规定请求是否异步处理
xhr.send(form); //开始上传，发送form数据
}
//上传进度实现方法，上传过程中会频繁调用该方法
function uploadProgress(evt){
var progressBar = document.getElementById("progressBar");
var percentage = document.getElementById("percentage");
var done = evt.position || evt.loaded;
var total = evt.totalSize || evt.total;
if(evt.lengthComputable){
progressBar.max = total;
progressBar.value = done;
percentage.innerHTML = Math.round(done / total * 100) + "%" ;
} else {
percentage.innerHTML = "unable to compute";
}
}
//上传成功响应
function uploadComplete(evt) {
var responseText = evt.target.responseText; //服务器接收完文件返回的响应文本
alert("上传成功！");
}
//上传失败
function uploadFailed(evt) {
alert("上传失败！");
}
//取消上传
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
<body>
注：Internet Explorer 9 以及更早的版本不支持 progress标签
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="percentage"></span>
<input type="file" id="file" name="myfile">
<input type="button" onclick="uploadFile()" value="上传">
<input type="button" onclick="uploadCanceled()" value="取消">
</body>
progress事件
onprogress事件处理程序会接收到一个event事件，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、position和totalSize。其中，lengthComputable是一个表示进度信息是否可用的布尔值，position标识已经接收的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数。
注：为确保正常执行，必须在调用open()方法之前添加onprogress事件处理程序。
下篇文章将讲述跨域问题
网友评论