FormData オブジェクトは Ajax リクエストを作成し、ファイルをアップロードします
この記事では、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();
2. FormData オブジェクトを使用してバイナリ ファイルを送信します:::::
方法 1: フォーム フォームを通じて FormData を初期化します。
1. HTML
<form enctype="multipare/form-data" method="post" name="fileinfo"> <label>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"/><br> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32"/><br> <label>File to stash:</label> <input type="file" name="file" required></form><p id="Output"></p><a href="javascript:sendForm()">stash the file !</a>
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);
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请求头});
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 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); } }); }
<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; }
ChromeFirefox(Gecko)
サファリ | 7 | 4.0(2.0) | 10 | |
5 | 関連する推奨事項: | jQuery は FormData を使用してファイルのアップロードを実装します |
FormData を使用して Ajax でファイルをアップロードする
##以上がFormData オブジェクトは Ajax リクエストを作成し、ファイルをアップロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











セッションハイジャックは、次の手順で達成できます。1。セッションIDを取得します。2。セッションIDを使用します。3。セッションをアクティブに保ちます。 PHPでのセッションハイジャックを防ぐための方法には次のものが含まれます。1。セッション_regenerate_id()関数を使用して、セッションIDを再生します。2。データベースを介してストアセッションデータを3。

JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。

PHP開発における固体原理の適用には、次のものが含まれます。1。単一責任原則(SRP):各クラスは1つの機能のみを担当します。 2。オープンおよびクローズ原理(OCP):変更は、変更ではなく拡張によって達成されます。 3。Lischの代替原則(LSP):サブクラスは、プログラムの精度に影響を与えることなく、基本クラスを置き換えることができます。 4。インターフェイス分離原理(ISP):依存関係や未使用の方法を避けるために、細粒インターフェイスを使用します。 5。依存関係の反転原理(DIP):高レベルのモジュールと低レベルのモジュールは抽象化に依存し、依存関係噴射を通じて実装されます。

システムが再起動した後、UnixSocketの権限を自動的に設定する方法。システムが再起動するたびに、UnixSocketの許可を変更するために次のコマンドを実行する必要があります:sudo ...

phpstormでCLIモードをデバッグする方法は? PHPStormで開発するときは、PHPをコマンドラインインターフェイス(CLI)モードでデバッグする必要がある場合があります。

静的結合(静的::) PHPで後期静的結合(LSB)を実装し、クラスを定義するのではなく、静的コンテキストで呼び出しクラスを参照できるようにします。 1)解析プロセスは実行時に実行されます。2)継承関係のコールクラスを検索します。3)パフォーマンスオーバーヘッドをもたらす可能性があります。

PHP開発でPHPのCurlライブラリを使用してJSONデータを送信すると、外部APIと対話する必要があることがよくあります。一般的な方法の1つは、Curlライブラリを使用して投稿を送信することです。
