FormData オブジェクトは Ajax リクエストを作成し、ファイルをアップロードします
- 不言オリジナル
- 2018-07-18 16:20:233023ブラウズ
この記事では、FormData オブジェクトを使用して Ajax リクエストを作成し、ファイルをアップロードする方法を共有します。必要な友人は参照してください。
XMLHttpRequest Level2 には、新しいインターフェイス FormData が追加されます。 [ は主にフォーム データの送信に使用されますが、キー付きデータの送信に単独で使用することもできます。通常の Ajax と比較して、バイナリ ファイルを非同期でアップロードできます]
FormData オブジェクトを使用すると、いくつかのキーと値のペアを使用して、js を通じて一連のフォーム コントロールをシミュレートできます。また、XMLHttpRequest の send() メソッドを使用してフォームを非同期に送信することもできます。
まず、前回の「フロントエンドとバックエンドの相互作用のためのパラメーター受け渡し方法」では、従来のフォーム送信方法 (フォームのシリアル化) について説明しました。一般的なパラメータを渡すのに適しています。アップロードされたファイルのファイル ストリームをシリアル化して配信することはできません。したがって、FormData を使用すると、ajax と組み合わせてファイルを簡単にアップロードできます。
#1. FormData を使用して Ajax リクエストを作成し、ファイルをアップロードする方法を紹介する前に、まず FormData とその使用法について理解しましょう:::::
W3C ドラフトでは、フォーム データを取得または変更するための 3 つのオプションが提供されています:::
方法 1: 空のフォーム データ オブジェクトを作成し、append() を使用して追加します1 つずつキーと値のペア
var oMyForm = new FormData(); // 创建一个空的FormData对象
oMyForm.append("userName","Coco"); // append()方法添加字段
oMyForm.append("accountNum",123456); // 数字123456立即被转换成字符串“123456”
oMyForm.append("userFile",fileInputElement.files[0]);var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"}); // Blob对象包含的文件内容是oFileBody
oMyForm.append("webmasterfile",oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST"," .php");
oPeq.send(oMyForm); // 使用XMLHttpRequest的send()把数据发送出去
上記の「userFile」と「webmasterfile」の値には両方ともファイルが含まれています。 ## フィールド 値は、Blob オブジェクト、File オブジェクト、または文字列にすることができます。他の型は、上記の「accountNum」など、自動的に文字列に変換されます。
WAY2: フォーム要素オブジェクトをパラメータとして取得し、それを FormData オブジェクトに渡します
—— 擬似コード—
var new_FormData = new FormData( someFormElement );
例:
var FormElement = document.getElementById("myFormElement");var oReq = new XMLHttpRequest();
oReq.open("POST"," .php");
oReq.send(new FormData(FormData));既存のフォームに基づいて新しいキーと値のペアを追加することもできます:
var FormElement = document.getElementById("myFormElement");var formData = new FormData(FormElement);
formData.append("serialnumber",serialNumber++);var oReq = new XMLHttpRequest();
oReq.send(formData); ユーザーが送信前にこの方法で編集したくない固定フィールドを追加できます。
方法 3: フォーム オブジェクトの getFormData メソッドを使用して、
var formobj = document.getElementById("myFormElement");
var formdata = formobj.getFormData();FormData オブジェクトを次と組み合わせて使用します。ネイティブ js は、Ajax を介して画像の非同期アップロードを実装します。もちろん、既存の jquery バッチ アップロード プラグインの原則は FormData を使用することです。
2. FormData オブジェクトを使用してバイナリ ファイルを送信します:：：：：
方法 1: フォーム フォームを通じて FormData を初期化します。
1. HTML
616446c85450afc472a9bd8ec9e64146 2e1cf0710519d5598b1f0f14c36ba674your email address:8c1ecd4bb896b2264e0711597d40766c 77ea3818c28708bdfa2d740f63ca84430c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674custom file label:8c1ecd4bb896b2264e0711597d40766c c53720150e0e40fa90d71213512a19430c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674File to stash:8c1ecd4bb896b2264e0711597d40766c 37618ecaa97ade89cdcd8c57e3705350f5a47148e367a6035fd7a2faa965022e8682d3dcb51d71511882c0fb08275db494b3e26ee717c64999d7867364b1b4a334fbcf1a3d1404e3f48634a414c8f9f7stash the file !5db79b134e9f6b82c0b36e0489ee08ed
2 にファイル入力ボックスを含むフォーム要素があります。選択したファイルを非同期でアップロードします。ユーザー
function sendForm(){ var oOutput = document.getElementById("Output");
var oData = new FormData(document.forms.nameItem("fileInfo"));
oData.append("customField","This is some extra data");
var oReq = new XMLHttpRequest();
oReq.open("POST"," .php",true);
oReq.onload = function(oEvent){
if(oReq.status == 200){
oOutput.innerHTML = "Uploaded!";
}else{
oOutput.innerHTML = "Error" + oReq.status + "occurred uploading your file!"
}
};
oReq.send(oData);
}WAY2: フォーム
#var data = new FormData();var oFileBody = "<a id="a"><b id="b">hey!</b></a>";var oBlob = new Blob([oFileBody],{type:"text/html"});
data.append("myfile",oBlob);## を使用せずに、File オブジェクトまたは Blob オブジェクトを FormData オブジェクトに直接追加します。 #FormData オブジェクトのフィールド値が Blob オブジェクトの場合、HTTP リクエストを送信するときに、Blob オブジェクトに含まれるファイルのファイル名を表す「content-Disposition」リクエストの値がブラウザごとに異なります。 :
Firefox は固定文字列「blob」を使用しますが、Chrome はランダムな文字列を使用します。
WAY3: Jquery を使用して FormData を送信します (関連する項目を正しく設定する必要があります)
var fd =new FormData(document.getElementById("fileinfo"));
fd.append("customField","This is some extra data");
$.ajax({
url:" .php",
type:"POST",
data:fd,
processData:false, // 告诉jquery不要处理发送的数据
contentType:false // 告诉jquery不要设置content-Type请求头});3. 例
1. FromData を使用して Ajax リクエストを作成し、ファイルをアップロードします#<form id="uploadForm">
指定文件名:<input type="text" name="filename" value="">
上传文件:<input type="file" name="file">
<input type="button" value="上传" onclick="doUpload()"></form>function doUpload(){ var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url:" .php",
type:"POST",
data:formData,
async:false,
cache:false,
contentType:false,
processData:false,
success:function(returndata){
alert(returndata);
},
error:function(returndata){
alert("error:"+returndata);
}
});
}#2. FormData を使用してフォームを送信し、画像をアップロードします
<form name="form" id="formData">
name:<input type="text" name="name">
gender:<input type="radio" name="gender" value="1"> male
<input type="radio" name="gender" value="2"> female
photo:<input type="file" name="photo" id="photo">
<input type="button" name="btn" value="submit" onclick="submit();">
</form><p id="result"></p>function submit(){
var data = new FormData($("#formData")[0]);
$.ajax({
url:" .php",
type:"POST",
data:data,
dataType:"JSON",
cache:false,
processData:false,
contentType:false
}).done(function(ret){
if(ret["isSuccess"]){
var result = "";
result +="name=" + ret["name"] + "<br>";
result += "gender=" + ret["gender"] + "<br>";
result += "<img src='"+ret['photo']+"'width='100'>";
$("#result").html(result); // 提交成功后将表单数据显示在id="result"的p里面
}else{
alert("提交失败");
}
}); return false;
}4. ブラウザの互換性
ChromeFirefox(Gecko)
| サファリ | 7 | 4.0(2.0) | 10 | |
| 5 | 関連する推奨事項: | jQuery は FormData を使用してファイルのアップロードを実装します |
FormData を使用して Ajax でファイルをアップロードする
##以上がFormData オブジェクトは Ajax リクエストを作成し、ファイルをアップロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。