Ajax 経由でファイルをアップロードし、FormData を使用して Ajax リクエストを作成します

この記事では主に、Ajax を介したファイルのアップロードと、Ajax リクエストでの FormData の使用に関する関連情報を紹介します。必要な友人は参照してください。

従来のフォーム送信によるファイルのアップロード:

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() メソッドを使用することもできます。 form" "。通常の ajax と比較して、FormData を使用する最大の利点は、バイナリ ファイルを非同期でアップロードできることです。

Chrome 7 以降、Firefox 4 以降、IE 10 など、すべての主要なブラウザの新しいバージョンがすでにこのオブジェクトをサポートしています。 +、Opera 12 以降、Safari 5 以降。

参照: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

フォーム form

Js コード

<form enctype="multipart/form-data" method="post" name="fileinfo">

を通じて FormData を初期化する唯一の方法は次のとおりです。

参照: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

FormData を使用して Ajax リクエストを作成し、ファイルをアップロードします

ここでは JQuery が使用されていますが、1.2 などの古いバージョンの JQuery も使用できますサポートされている場合は、バージョン 2.0 以降を使用することをお勧めします。

Html コード

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);

Js コード

<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>

上記は、皆様のお役に立てれば幸いです。将来。

関連記事:

jQuery Ajaxを使ってファイルをアップロードする方法

ajaxを使って非同期更新リクエストを実装

Ajax+phpで商品分類の3段階連携を実現

以上がAjax 経由でファイルをアップロードし、FormData を使用して Ajax リクエストを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。