HTML5 Form Data 对象

利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单".

创建一个FormData对象

var oMyForm = new FormData();oMyForm.append("username", "Groucho");oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"// fileInputElement中已经包含了用户所选择的文件oMyForm.append("userfile", fileInputElement.files[0]);var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容var oBlob = new Blob([oFileBody], { type: "text/xml"});oMyForm.append("webmasterfile", oBlob);var oReq = new XMLHttpRequest();oReq.open("POST", "submitform.php");oReq.send(oMyForm);

使用HTML表单来初始化一个FormData对象

var formElement = document.getElementById("myFormElement");var oReq = new XMLHttpRequest();oReq.open("POST", "submitform.php");oReq.send(new FormData(formElement));

还可以在已有表单数据的基础上,继续添加新的键值对,如下:

var formElement = document.getElementById("myFormElement");formData = new FormData(formElement);formData.append("serialnumber", serialNumber++);oReq.send(formData);

使用FormData对象发送文件

<form enctype="multipart/form-data" method="post" name="fileinfo">  <label>Your email address:</label>  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /></form><div id="output"></div><a href="javascript:sendForm()">Stash the file!</a>

使用下面的代码来异步的上传用户所选择的文件:

function sendForm() {  var oOutput = document.getElementById("output");  var oData = new FormData(document.forms.namedItem("fileinfo"));  oData.append("CustomField", "This is some extra data");  var oReq = new XMLHttpRequest();  oReq.open("POST", "stash.php", true);  oReq.onload = function(oEvent) {    if (oReq.status == 200) {      oOutput.innerHTML = "Uploaded!";    } else {      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";    }  };  oReq.send(oData);}

如果FormData对象中的某个字段值是一个Blob对象,则在发送http请求时,代表该Blob对象所包含文件的文件名的"Content-Disposition"请求头的值在不同的浏览器下有所不同,Firefox使用了固定的字符串"blob,"而Chrome使用了一个随机字符串.

使用jQuery来发送FormData

你还可以使用jQuery来发送FormData,但必须要正确的设置相关选项:

var fd = new FormData(document.getElementById("fileinfo"));fd.append("CustomField", "This is some extra data");$.ajax({  url: "stash.php",  type: "POST",  data: fd,  processData: false,  // 告诉jQuery不要去处理发送的数据  contentType: false   // 告诉jQuery不要去设置Content-Type请求头});         

上传文件显示进度

          function fileSelected() {        var file = document.getElementById('fileToUpload').files[0];        if (file) {var fileSize = 0;if (file.size > 1024 * 1024)    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';else    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

document.getElementById('fileName').innerHTML = 'Name: ' + file.name;document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;document.getElementById('fileType').innerHTML = 'Type: ' + file.type;

        }

    }        function uploadFile() {        var fd = new FormData();

fd.append("fileToUpload",document.getElementById('fileToUpload').files[0]);

        var xhr = new XMLHttpRequest();        xhr.upload.addEventListener("progress", uploadProgress, false);        xhr.addEventListener("load", uploadComplete, false);        xhr.addEventListener("error", uploadFailed, false);        xhr.addEventListener("abort", uploadCanceled, false);        xhr.open("POST", "Home/Upload");        xhr.send(fd);    }function uploadProgress(evt) {        if (evt.lengthComputable) {var nowDate = new Date().getTime();taking = nowDate - startDate;var x = (evt.loaded) / 1024;var y = taking / 1000;var uploadSpeed = (x / y);var formatSpeed;if (uploadSpeed > 1024) {    formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb\/s";} else {    formatSpeed = uploadSpeed.toFixed(2) + "Kb\/s";}var percentComplete = Math.round(evt.loaded * 100 / evt.total);progressbar.progressbar("value", percentComplete);// console && console.log(percentComplete, ",", formatSpeed);        }}        function uploadComplete(evt) {        /* This event is raised when the server send back a response */        alert(evt.target.responseText);

    }    function uploadFailed(evt) {        alert("There was an error attempting to upload the file.");    }    function uploadCanceled(evt) {        alert("The upload has been canceled by the user or the browser dropped the connection.");

    }