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>

Js コード

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 サイトの他の関連記事を参照してください。