HTML5 formDataメソッドの紹介と実装ファイルの実装ファイル

XMLHTTPREQUESTはブラウザインターフェイスで、JavaScriptをHTTPと通信させることができます。 XMLHTTPREQUESTは、現在のブラウザでデータを相互作用するための一般的に使用される方法です。 2008年2月、XMLHTTPREQUESTレベル2が提案されていますバイナリファイルをアップロードできること。 FormDataでファイルをアップロードする方法を紹介しましょう。

まず、formdata：formdataオブジェクトの基本的な方法を見ると、すべてのテーブル要素と値のクエリストリングを形成して、背景に送信できます。フォームフォームをパラメーターとしてformDataコンストラクターに渡すだけです。

 var form = document.getElementById（form1）;

このようにして、FDはAjax Send（）メソッドを介して背景に直接送信できます。

次のフォームが作成されます。

 <form name = form1 id = form1> <p> name：<input type = text name = name /> <p> gender：<入力タイプ=無線name = gender値= 1 />男性<入力タイプ=ラジオname =性別値= 2 /p>女性< /p> <p> stu-Number：<入力タイプ=テキスト名=番号 />> < /p> <p>写真：<入力タイプ=ファイル名=写真ID =写真> </p> <p> <入力タイプ=ボタンname = b1値= onclick = fsubmit（）/p> </form> <div id = result> </div>

上記のコードはフォームを作成し、単に情報を入力し、アバターとして画像を選択し、Divを設定して返品の結果を保存します。

簡単には、jQueryによってカプセル化されたAjaxを使用して、データを背景に転送します。

 function fsubmit（）{var form = document.getElementById（form1）; jQueryは、送信データコンテンツを処理しないでくださいejson（response）; var result+=個人情報：+json ['name']+<br/> + json ['number']; .html（result）;}}）;}

上記のコードのserver.phpは、ajaxリクエストを受信し、特定のコードを返すサーバーのファイルです。

 <？$ _ post ['name']： ISSET（$ _ files ['photo'] ['name']） ['name'] = $ names ['gender'] = $ response ['number'] = $ filename;} '] = false;} echo json_encode（$ response）;？>

情報を入力した後、[送信]をクリックして、ページに次の効果を取得できます。

もちろん、あなたがネイティブのJavaScript愛好家である場合、上記の機能は単純なJavaScriptの実装コードです。

 fsubmit {var form.getelementbyd（formdata（formdata.name）; （Olq。ReadyState== 4）{oreq.status == 200）{console.log（ofeq.responsetext）;個人情報：<br/>+json ['name']+<br/> gender：+json ['gender']+<br/>+json ['number']; <<< br /> avatar：<img src = ' + json +' height = border-radius：50％; post、server.php）;

FormData上の新しいオブジェクトに加えて、フォームがパラメーターに直接渡され、他の機能があります。 InternetでFormDataによって導入された記事のほとんどは、Apend（）メソッドのみに言及しています。知っておきましょう：

コンソールの後、FormDataオブジェクトにはこのような方法があります。

append（）メソッドは、formdataオブジェクトにキー値を追加するために使用されます。

 fd.append（ 'key1'、value1）;

FDは、フォームフォームまたはその他のキー値のペアを含めることができるFormDataのオブジェクトです。

対応するキーキー値値を設定します

fd.set（ 'key1'、value1）;

Append（）メソッドの違いは、指定されたキー値が存在する場合、Append（）メソッドが前の設定のキー値ペアをカバーすることです。それでも、この例を介して比較してください。フォームの前方に基づいています。

 fd.append（ 'name'、will）;

2つのキーは、名前のキー値です。

 fd.set（ 'name'、will）;

名前のキー値は、1つのキーのみです。

上記は、append（）とset（）の違いです。設定値セットが存在しない場合、2つの効果は同じです。

削除するキー値の名前が複数同じキー値がある場合、次のことを削除することを示します。

 fd.append（ 'name'、 'will'）;

フォームの名前情報とappend（）を介して新しく追加された名前情報が削除されました。

見つける必要があるキーの名前を示すパラメーターを受信し、最初のキーの最初の値を返します。同じキーが複数ある場合、このキーのすべての対応する値を返します。

上記のフォームに基づいて：

 fd.append（ 'name'、 'will'）;

 fd.append（ 'name'、 'will'）;

この方法は、キーの名前でもあるパラメーターも受信し、ブール値を返して、formDataオブジェクトにキーが含まれているかどうかを判断します。上記のフォームは例です。

 console.log（fd.has（ 'name'））;

この方法は、パラメーターを受信し、このイテレーターを介してすべてのキーを通過する必要があります。上記のフォームは例です。

 for（var key of fd.keys（））{console.log（key）;}

結果は次のとおりです。

名前

性別

番号

写真

もちろん、キーの反復型により、値のイテレーターを通過することは不可欠です。 VALUES（）は、値のイテレーターです。

 for（fd.values（）のvar値（））{console.log（value）;}

結果：

キーを横断するイテレーターがあります。また、価値のあるイテレーターもあります。エントリ（）は、キー値ペアを含むイテレーターを返すことです。

 for（fd.entries（））{console.log（pair [0]+ '、'+ pair [1]）;}

結果：

FormDataはXMLHTTPREQUESTレベル2の新しいインターフェースであるため、IE10よりも低いIEブラウザは、上記のFormDataオブジェクトをサポートしていません下の図：

上記は、この記事のすべての内容です。