FormDataとIframeでファイルをアップロードする2つの方法

AJAXでファイルをアップロードしますが、一般的にはFormDataオブジェクトを使用します.
FormDataオブジェクトは、一連の健値ペアを使用して完全なフォームをシミュレートし、XMLHttpRequestを使用してこの「フォーム」を送信できます.
FormDataの使用

空のFormDataオブジェクトを作成し、appendメソッドでvar formdata=new FormData()にキー値を1つずつ追加します.formdata.append("name","xx");formdata.append("flie", filename);

form要素オブジェクトを取得し、パラメータとしてFormDataオブジェクトに入力します.var formOjb = document.getElementById("form");var formdata = new FormData(formOjb );

form要素オブジェクトのgetFormDataメソッドを使用してvar formobj=documentを生成する.getElementById("form");var formdata = formobj.fetFormData();

formdataは不透明なオブジェクトであり,現在は一時的に1つのappendしか操作できず,シーケンス化手段でその中の内容を得ることはできない.拡張型XMLHttpRequestオブジェクトのsendメソッドにも1つしか使用されません.

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

jQueryでformDataオブジェクトを使用してファイルをアップロードする方法も特に紹介します.
フォームを使用してFormDataオブジェクトを初期化してファイルをアップロードする
HTMLコード

    
    upload

JAvascriptコード

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

注意点:

processDataはfalseに設定されています.data値はformDataオブジェクトなので、データの処理は不要です.

ラベルenctype=「multipart/form-data」プロパティを追加します.

cacheはfalseに設定されており、アップロードファイルはキャッシュする必要はありません.

contentTypeがfalseに設定されています.フォームで構成するFormDataオブジェクトであり、属性enctype="multipart/form-data"が宣言されているため、ここでfalseに設定.

アップロード後、サーバコードは、name="file"と宣言するため、クエリパラメータ名fileからファイル入力ストリームオブジェクトを取得する必要がある.
FormDataオブジェクトを使用してフィールドを追加してファイルをアップロードする
HTMLコード

    
    upload

JAvascriptコード

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

$('#file')[0].files[0]では、multipleまたはmultiple=「multiple」プロパティを追加する限り、1つのラベルが複数のファイルをアップロードできることがわかります.
Ifrmaeでファイルをアップロードする
FormDataはすべてのブラウザでサポートされているわけではないので、iframeでファイルアップロードの機能を実現する必要がある場合があります.
HTMLコード

jsコード

var iframe = $('