ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript オブジェクトでの FormData の使用
この記事の内容
FormData オブジェクトの作成方法
HTML フォームから FormData オブジェクトを作成する
FormData オブジェクトを使用してファイルをアップロードする
フォームを送信してファイルをアップロードするAJAX FormData オブジェクトを使用する必要はありません
関連リンク
FormData オブジェクトを使用すると、XMLHttpRequest
を使用してリクエストを送信するためのキーと値のペアのセットを組み立てることができます。 。フォームとは独立して使用できるため、フォーム データの送信がより柔軟で便利になります。フォームのエンコード タイプを multipart/form-data に設定した場合、FormData を通じて送信されるデータ形式は、フォームから submit()
メソッドを通じて送信されるデータ形式と同じになりますXMLHttpRequest
发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit()
方法传输的数据格式相同
你可以自己创建一个FormData对象,然后通过调用它的append()
方法添加字段,就像这样:
var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"// HTML 文件类型input,由用户选择formData.append("userfile", fileInputElement.files[0]);// JavaScript file-like 对象var content = '975f881abd041d8a9a52113a3d7608728ad3eee38b36f0786840bfc85b25539ahey!0d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed'; // 新文件的正文...var blob = new Blob([content], { type: "text/xml"}); formData.append("webmasterfile", blob);var request = new XMLHttpRequest(); request.open("POST", "http://foo.com/submitform.php"); request.send(formData);
注意:字段 "userfile" 和 "webmasterfile" 都包含一个文件. 字段 "accountnum" 是数字类型,它将被FormData.append()
方法转换成字符串类型(FormData
对象的字段类型可以是 Blob
, File
, 或者 string: 如果它的字段类型不是Blob也不是File,则会被转换成字符串类型。
上面的示例创建了一个FormData
实例,包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段,然后使用XMLHttpRequest
的send()
方法发送表单数据。字段 "webmasterfile" 是 Blob
类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File
接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob()
构造函数创建一个Blob对象。
想要构造一个包含Form表单数据的FormData对象,需要在创建FormData对象时指定表单的元素。
var formData = new FormData(someFormElement); 示例:var formElement = document.querySelector("form");var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); request.send(new FormData(formElement));
你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前,附加额外的数据到FormData对象里,像这样:
var formElement = document.querySelector("form");var formData = new FormData(formElement);var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); formData.append("serialnumber", serialNumber++); request.send(formData);
这样你就可以在发送请求之前自由地附加不一定是用户编辑的字段到表单数据里
你还可以使用FormData上传文件。使用的时候需要在表单中添加一个文件类型的input:
ff146639ecf87721cba4be18b8688d52 2e1cf0710519d5598b1f0f14c36ba674Your email address:8c1ecd4bb896b2264e0711597d40766c fdd4de8b295fab4aa0708ba29a56a4f8ff9d32c555bb1d9133a29eb4371c1213 2e1cf0710519d5598b1f0f14c36ba674Custom file label:8c1ecd4bb896b2264e0711597d40766c 3c2750d34148cf8c03cc62edc6c563efff9d32c555bb1d9133a29eb4371c1213 2e1cf0710519d5598b1f0f14c36ba674File to stash:8c1ecd4bb896b2264e0711597d40766c 965e00529aa4b86d8dd68bfcdaa48288 5fa1d26c6939704a2c990d4281d4b44df5a47148e367a6035fd7a2faa965022ee388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3
然后使用下面的代码发送请求:
var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { var oOutput = document.querySelector("p"), oData = new FormData(form); 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 when trying to upload your file.666a5bd9fab33f2f6688eb1baf827b5d"; } }; oReq.send(oData); ev.preventDefault(); }, false);
注意:如果FormData对象是通过表单创建的,则表单中指定的请求方式会被应用到方法open()中 。
你还可以直接向FormData对象附加File或Blob类型的文件,如下所示:
data.append("myfile", myBlob, "filename.txt");
使用appned()方法时,可以通过第三个可选参数设置发送请求的头 Content-Disposition
append()
メソッドを呼び出してフィールドを追加します。
var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // 不处理数据 contentType: false // 不设置内容类型});
注: >フィールド「userfile」と「webmasterfile」にはファイルが含まれています。フィールド「accountnum」は数値型であり、FormData.append()
メソッドによって文字列型に変換されます (フィールドFormData
オブジェクトのタイプは、Blob
、File
、または文字列です。フィールドのタイプが Blob でも File でもない場合、文字列型に変換されます
上記の例では、「username」、「accountnum」、「userfile」、「webmasterfile」の 4 つのフィールドを含む FormData
インスタンスを作成し、次を使用します。 XMLHttpRequest
>send() メソッドは、フォーム データを送信します。フィールド "webmasterfile" のタイプは Blob です。 Blob で表されるデータは、必ずしも JavaScript ネイティブ形式であるとは限りません。File
インターフェイスは、Blob の機能を継承し、ファイルをサポートするために拡張されています。ユーザーのシステムで Blob() コンストラクターは Blob オブジェクトを作成します <br><h2 class="highlight-spanned"><span class="highlight-span"> HTML フォーム<span class="icon-pencil">編集</span></span></h2>を介してオブジェクトを作成します
🎜🎜🎜注:FormData オブジェクトがフォームを通じて作成された場合、フォームで指定されたリクエスト メソッドがメソッド open() に適用されます。 🎜🎜以下に示すように、File または Blob タイプのファイルを FormData オブジェクトに直接添付することもできます: 🎜rrreee🎜 appended() メソッドを使用する場合、3 番目のオプションのパラメーター Content を通じて送信リクエストのヘッダーを設定できます。 -Disposition
ファイル名を指定します。ファイル名が指定されていない場合 (またはこのパラメーターがサポートされていない場合)、「blob」という名前が使用されます。 🎜🎜正しい構成項目を設定すると、jQuery を通じて FormData オブジェクトを使用することもできます: 🎜🎜🎜🎜rrreee🎜🎜🎜
以上がJavaScript オブジェクトでの FormData の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。