XMLHttpRequest は、HTTP (S) 通信用の Javascript を有効にするためのブラウザー インターフェイスです。XMLHttpRequest は、今日のブラウザーでフロントエンドとバックエンドの対話データに一般的に使用されている方法です。2008 年 2 月に XMLHttpRequest レベル 2 のドラフトが提案されました. 前世代と比較して, いくつかの新しい機能が追加されています. その中で, FormData は XMLHttpRequest レベル 2 の新しいオブジェクトです. これを使用してフォームを送信し, フォーム送信をシミュレートします. もちろん,最大の利点は、バイナリ ファイルをアップロードできることです。以下では、FormData を使用してファイルをアップロードする方法を具体的に紹介します。
FormData アップロード ファイル インスタンス
まず、formData の基本的な使い方を見てみましょう。FormData オブジェクトは、すべてのフォーム要素の名前と値を queryString に結合し、それをバックグラウンドに送信できます。フォーム form をパラメーターとして FormData コンストラクターに渡すだけです。
var form = document.getElementById("form1");
var fd = new FormData(form);コピー
このように、afd は ajax の send() メソッドを介して直接バックグラウンドに送信できます。
以下は、フォーム フォームを作成します。通常のデータに加えて、フォームにはファイルのアップロードがあります。フォーム オブジェクトをパラメータとして FormData オブジェクトに直接渡します。
<form name="form1" id="form1">
<p>name:<input type="text" name="name" /></p>
<p>gender:<input type="radio" name="gender" value="1" />male <input type="radio" name="gender" value="2" />female</p>
<p>stu-number：<input type="text" name="number" /></p>
<p>photo:<input type="file" name="photo" id="photo"></p>
<p><input type="button" name="b1" value="submit" onclick="fsubmit()" /></p>
</form>
<div id="result"></div>コピー
上記のコードは、フォームを作成し、単にいくつかの情報を入力し、アバターとして画像を選択し、返された結果を格納する div を設定します。
簡単にするために、jquery でカプセル化された ajax を使用してデータをバックグラウンドに転送します。
function fsubmit() {
var form=document.getElementById("form1");
var fd =new FormData(form);
$.ajax({
url: "server.php",
type: "POST",
data: fd,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(response,status,xhr){
console.log(xhr);
var json=$.parseJSON(response);
var result = '';
result +="个人信息：<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];
result += '<br/>头像：<img src="' + json['photo'] + '" height="100" style="border-radius: 50%;" />';
$('#result').html(result);
}
});
return false;
}コピー
上記のコードの server.php は、 ajax リクエストを受け取り、受け取った結果を返すサーバー側のファイルで、具体的なコードは次のとおりです。
<?php $name = isset($_POST['name'])? $_POST['name'] : ''; $gender = isset($_POST['gender'])? $_POST['gender'] : ''; $number = isset($_POST['number'])? $_POST['number'] : ''; $filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.')); $response = array(); if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){ $response['isSuccess'] = true; $response['name'] = $name; $response['gender'] = $gender; $response['number'] = $number; $response['photo'] = $filename; }else{ $response['isSuccess'] = false; } echo json_encode($response); ?>コピー
情報を入力した後、送信をクリックすると、ページに次のような効果が得られ、サーバー側の対応するフォルダーにアップロードされた写真を見つけることもできます。
もちろん、ネイティブの JavaScript 愛好家であれば、上記の機能を実現できます。以下は簡単な JavaScript 実装コードです。
function fsubmit() {
var form=document.getElementById("form1");
var formData=new FormData(form);
alert(formData.name);
var oReq = new XMLHttpRequest();
oReq.onreadystatechange=function(){
if(oReq.readyState==4){
if(oReq.status==200){
console.log(typeof oReq.responseText);
var json=JSON.parse(oReq.responseText);
var result = '';
result +="个人信息：<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];
result += '<br/>头像：<img src="' + json['photo'] + '" height="50" style="border-radius: 50%;" />';
$('#result').html(result);
}
}
};
oReq.open("POST", "server.php");
oReq.send(formData);
return false;
}コピー
FormData オブジェクト メソッドの概要
FormData には、上記の新しいオブジェクトを作成するときにフォームをパラメーターとして直接渡す以外に、他の関数があります。インターネット上の FormData の紹介に関する記事のほとんどは append() メソッドについてのみ言及していますが、FormData オブジェクトにはどのようなメソッドがあるのでしょうか。私たちは知っています：
コンソールの後で、FormData オブジェクトにそのようなメソッドがあることを発見したので、真実を見つけるために自分でテストする必要があります. 以下、これらのメソッドを 1 つずつ説明します。
1、追記()
キーと値のペアを FormData オブジェクトに追加するには、append() メソッドを使用します。
fd.append('key1',"value1");
fd.append('key2',"value2");コピー
fd は FormData オブジェクトであり、新しく作成された空のオブジェクトにすることも、フォーム フォームまたはその他のキーと値のペアを既に含めることもできます。
2、set()
対応するキーのキー値に対応する値を設定します
fd.set('key1',"value1");
fd.set('key2',"value2");コピー
append() メソッドに少し似ています. 2 つの違いは、指定されたキー値が存在する場合、append() メソッドは新しく追加されたすべてのキーと値のペアを末尾に追加し、set() メソッドはメソッドは、以前の設定を上書きするキーと値のペアです。または、例を比較して、前の形式に基づいて新しいキーと値のペアを追加 () または設定 () します。
fd.append('name',"will");コピー
キーが名前である 2 つのキーと値のペアがあります。
fd.set('name',"will");コピー
name をキーとするキーと値のペアは 1 つだけです。
上記は、append() と set() の違いです。設定されたキー値が存在しない場合、2 つの効果は同じです。
3、削除()
削除するキー値の名前を示すパラメータを受け取ります。同じキー値が複数ある場合は、まとめて削除されます。
fd.append('name','will');
fd.delete('name');コピー
フォーム内の名前情報とappend()で追加された名前情報を削除します。
4. get() と getAll()
検索するキーの名前を示すパラメーターを受け取り、そのキーに対応する最初の値を返します。同じキーが複数ある場合、このキーに対応するすべての値を返す必要があります。
また、上記のフォームフォームに基づいています。
fd.append('name','will');
console.log(fd.get('name')); // seanコピー
fd.append('name','will');
console.log(fd.getAll('name')); // ["sean", "will"]コピー
5、ハズ()
このメソッドは、キーの名前でもあるパラメータを受け取り、FormData オブジェクトにキーが含まれているかどうかを判断するために使用されるブール値を返します。上記のフォームを例にとります。
console.log(fd.has('name')); // true
console.log(fd.has('Name')); // falseコピー
6、キー()
このメソッドはパラメーターを受け取る必要はなく、FormData オブジェクト内のすべてのキーをトラバースできる反復子を返します。上記のフォームを例にとります。
for (var key of fd.keys()) {
console.log(key);
}コピー
結果は次のとおりです。
name
gender
number
photoコピー
7、値()
キーをトラバースするためのイテレーションがあり、もちろん値をトラバースするためのイテレータは不可欠です。values() は、値をトラバースするための反復子であり、その使用法は keys() に似ています。
for (var value of fd.values()) {
console.log(value);
}コピー
結果：
8、エントリー()
キーをトラバースするためのイテレータと値をトラバースするためのイテレータがあります。両方の組み合わせを作成してみませんか! entry() は、キーと値のペアを含む反復子を返します。
for(var pair of fd.entries()) {
console.log(pair[0]+ ', '+ pair[1]);
}コピー
結果：
FormData の互換性の問題
FormDataはXMLHttpRequest Level 2の新たに追加されたインターフェースであるため、IE10以下のIEブラウザはFormDataに対応していません.上記で紹介したFormDataオブジェクトのメソッドについては、IEブラウザでテストした結果未対応です.具体的には主要なブラウザの対応状況次の図を参照できます。
