ホームページ > 記事 > ウェブフロントエンド > FormData を使用して Ajax でファイルをアップロードする
今回は、FormData を使用して Ajax 経由でファイルをアップロードする際の 注意事項 をいくつか紹介します。
従来のフォーム送信によるファイルのアップロード:Html コード
<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定文件名: <input type ="text" name="filename" /></p> <p >上传文件: <input type ="file" name="file" /></p> <p >关键字1: <input type ="text" name="keyword" /></p> <p >关键字2: <input type ="text" name="keyword" /></p> <p >关键字3: <input type ="text" name="keyword" /></p> <input type ="submit" value="上传"/> </form>ただし、従来のフォーム送信ではページが更新されますが、場合によってはページを更新したくない場合があります。すべてのリクエストは Ajax を使用して行われます:
Js コード
$.ajax({ url : "http://localhost:8080/STS/rest/user", type : "POST", data : $( '#postForm').serialize(), success : function(data) { $( '#serverResponse').html(data); }, error : function(data) { $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText); } });上記のように、フォーム フォームは $('#postForm').serialize() を通じてシリアル化でき、それによってフォーム フォーム内のすべてのパラメーターをサーバーに渡すことができます。 ただし、上記のメソッドは一般的なパラメータのみを渡すことができ、アップロードされたファイルのファイルストリームをシリアル化して渡すことはできません。
しかし、現在、主流のブラウザは FormData と呼ばれるオブジェクトをサポートし始めており、この FormData を使用すると、Ajax を使用して簡単にファイルをアップロードできるようになります
。
FormDataとその使用法についてFormDataとは何ですか? Mozilla の概要を見てみましょう。
XMLHttpRequest レベル 2 では、新しいインターフェイス FormData が追加されます。FormData オブジェクトを使用すると、
JavaScriptを使用して、いくつかのキーと値のペアを持つ一連のフォーム コントロールをシミュレートできます。また、XMLHttpRequest の send() メソッドを使用してこれを送信することもできます。通常の ajax と比較して、FormData を使用する最大の利点は、バイナリ ファイルを非同期でアップロードできることです。Chrome 7 以降、Firefox 4 以降、IE などのすべての主要なブラウザの新しいバージョンがすでにこのオブジェクトをサポートしています。 10 以降、Opera 12 以降、Safari 5 以降。
参照:
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormDataこれは、フォーム
<form enctype="multipart/form-data" method="post" name="fileinfo">Js コードを通じて FormData を初期化する唯一の方法です
var oData = new FormData(document.forms.namedItem("fileinfo" ));
oData.append( "CustomField", "This is some extra data" );
var oReq = new XMLHttpRequest();
oReq.open( "POST", "stash.php" , true );
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!" ;
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
}
};
oReq.send(oData);
参照: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
FormData を使用して Ajax リクエストを作成し、ファイルをアップロードします
ここでは JQuery が使用されていますが、次のような古いバージョンの JQuery も使用できます。 1.2 サポートされていません。バージョン 2.0 以降を使用するのが最善です:
Html コード<form id= "uploadForm">
<p >指定文件名: <input type="text" name="filename" value= ""/></p >
<p >上传文件: <input type="file" name="file"/></ p>
<input type="button" value="上传" onclick="doUpload()" />
</form>
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}
この記事のケースを読んだ後は、この方法を習得したと思います。情報については、php 中国語 Web サイトの記事のその他の関連トピックにご注意ください。
推奨読書:
js+ajaxcapはjsonオブジェクトを操作し、テーブルにループして保存しますAjaxを使用して登録されたユーザー名が存在するかどうかを確認しますAjax操作フォームはファイルを非同期でアップロードします以上がFormData を使用して Ajax でファイルをアップロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。