FormData物件

weixin_34219944發表於2011-04-26
ORM物件

FF4中增加了一個很有意思的物件，FormData。通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後臺。這用jQuery的方法來說，就是serialize。但當我們使用Ajax提交時，這過程就要變成人工的了。因此，FormData物件的出現可以減少我們一些工作量。

想得到一個FormData物件，很簡單：

 var formdata = new FormData();

但一個空的FormData物件對我們沒有意義，因此W3c草案提供了三種方案來獲取或修改FormData。

方案1：建立一個空的FormData物件，然後再用append方法逐個新增鍵值對：

var formdata = new FormData();
formdata.append("name", "司徒正美"); 
formdata.append("blog", "http://www.cnblogs.com/rubylouvre/");

方案2：取得form元素物件，將它作為引數傳入FormData物件中！

        var formobj =  document.getElementById("form");
        var formdata = new FormData(formobj);

方案3：利用form元素物件的getFormData方法生成它！

        var formobj =  document.getElementById("form");
        var formdata = formobj.getFormData()

注意，formdata是一個不透明的物件，現在暫時只有一個append可以操作，不能通過序列化手段得到其裡面的內容，這實在是遺憾。它的用法現在也只有一個，用於增強型的XMLHttpRequest物件的send方法中去！

 var formElement = document.getElementById("myFormElement");
formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

相關連結：Firefox 4: easier JS form handling with FormData

https://gist.github.com/3120320

/* * FormData for XMLHttpRequest 2 - Polyfill for Web Worker (c) 2012 Rob W * License: Creative Commons BY - http://creativecommons.org/licenses/by/3.0/ * - append(name, value[, filename]) * - toString: Returns an ArrayBuffer object * * Specification: http://www.w3.org/TR/XMLHttpRequest/#formdata * http://www.w3.org/TR/XMLHttpRequest/#the-send-method * The .append() implementation also accepts Uint8Array and ArrayBuffer objects * Web Workers do not natively support FormData: * http://dev.w3.org/html5/workers/#apis-available-to-workers **/ (function() { // Export variable to the global scope (this == undefined ? self : this)['FormData'] = FormData; var ___send$rw = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype['send'] = function(data) { if (data instanceof FormData) { if (!data.__endedMultipart) data.__append('--' + data.boundary + '--\r\n'); data.__endedMultipart = true; this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + data.boundary); data = new Uint8Array(data.data).buffer; } // Invoke original XHR.send return ___send$rw.call(this, data); }; function FormData() { // Force a Constructor if (!(this instanceof FormData)) return new FormData(); // Generate a random boundary - This must be unique with respect to the form's contents. this.boundary = '------WebKitFormBoundary' + Math.random().toString(36); var internal_data = this.data = []; /** * Internal method. * @param inp String | ArrayBuffer | Uint8Array Input */ this.__append = function(inp) { var i=0, len; if (typeof inp === 'string') { for (len=inp.length; i

相關文章