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衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

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

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

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

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

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

ホットトピック











多くの場合、キーワードと追跡パラメーターで散らかった長いURLは、訪問者を阻止できます。 URL短縮スクリプトはソリューションを提供し、ソーシャルメディアやその他のプラットフォームに最適な簡潔なリンクを作成します。 これらのスクリプトは、個々のWebサイトにとって価値があります

2012年のFacebookによる有名な買収に続いて、Instagramはサードパーティの使用のために2セットのAPIを採用しました。これらはInstagramグラフAPIとInstagram Basic Display APIです。

Laravelは、直感的なフラッシュメソッドを使用して、一時的なセッションデータの処理を簡素化します。これは、アプリケーション内に簡単なメッセージ、アラート、または通知を表示するのに最適です。 データは、デフォルトで次の要求のためにのみ持続します。 $リクエスト -

これは、LaravelバックエンドとのReactアプリケーションの構築に関するシリーズの2番目と最終部分です。シリーズの最初の部分では、基本的な製品上場アプリケーションのためにLaravelを使用してRESTFUL APIを作成しました。このチュートリアルでは、開発者になります

Laravelは簡潔なHTTP応答シミュレーション構文を提供し、HTTP相互作用テストを簡素化します。このアプローチは、テストシミュレーションをより直感的にしながら、コード冗長性を大幅に削減します。 基本的な実装は、さまざまな応答タイプのショートカットを提供します。 Illuminate \ support \ facades \ httpを使用します。 http :: fake([[ 'google.com' => 'hello world'、 'github.com' => ['foo' => 'bar']、 'forge.laravel.com' =>

PHPクライアントURL(CURL)拡張機能は、開発者にとって強力なツールであり、リモートサーバーやREST APIとのシームレスな対話を可能にします。尊敬されるマルチプロトコルファイル転送ライブラリであるLibcurlを活用することにより、PHP Curlは効率的なexecuを促進します

顧客の最も差し迫った問題にリアルタイムでインスタントソリューションを提供したいですか? ライブチャットを使用すると、顧客とのリアルタイムな会話を行い、すぐに問題を解決できます。それはあなたがあなたのカスタムにより速いサービスを提供することを可能にします

2025 PHP Landscape Surveyは、現在のPHP開発動向を調査しています。 開発者や企業に洞察を提供することを目的とした、フレームワークの使用、展開方法、および課題を調査します。 この調査では、現代のPHP Versioの成長が予想されています
