ホームページ >ウェブフロントエンド >フロントエンドQ&A >フォームと FormData を使用してファイルを送信します。

フォームと FormData を使用してファイルを送信します。

jackloveオリジナル: 2018-06-11 22:38:453111ブラウズ

1. ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e

ファイル送信の手順に進む前に、まず form タグを確認しましょう。 form には多くの属性がありますが、ここでは次の 2 つの属性についてのみ説明します:

1、method (enctype は 'application/x-www-form-urlencoded')

ほとんどの場合、大きい、GET と POST のみが使用されます。

①GET: フォーム送信に GET を使用する場合、ユーザーエージェント (ブラウザ) は、name=value に従って各入力コンポーネントを自動的に処理します (encodeURIComponent を使用して名前と値をそれぞれエンコードし、その後、'=' を使用してエンコードされたキーを接続します) -値のペア、複数のキーと値のペアは「&」を使用して接続され、クエリ文字列が生成され、URL の末尾に接続されます。

②POST: POST も GET と同じ文字列を生成しますが、この文字列が URL の末尾に追加されるのではなく http リクエストヘッダーに書き込まれる点が異なります。。

2 つの主な違い:

GET には送信されるデータのサイズに制限 (通常は 2kb) がありますが、POST には理論上制限がありません (ただし、実際のサイズは約 2GB)。

2. enctype

前述のように、フォームのデフォルト値は、enctype の 3 つの値の 1 つである 'application/x-www-form-urlencoded' です。次にこれら 3 つの値を入力します。

①application/x-www-form-urlencode: POST と GET に対応する動作のデフォルト値は上で説明したため、ここでは説明しません

②text/plain: Takeこの値を指定すると、フォーム値はエンコードされず、プレーンテキストでバックエンドサーバーに送信されます。ファイル送信時にバイナリデータを適切にサポートできないため、この値は基本的に役に立ちません。

③multipart/form-data: enctype がこのオプションを使用すると、ブラウザは文字をエンコードせず、代わりにコントロール単位 (入力など) に分割し、各コントロールにコンテンツを追加します。 -性質: フォームデータ、名前 (入力に対応する名前)、ファイル名 (ファイルが送信される場合、変更されたフィールドがあります)、および Content-Type (前のフィールドと同じ、ファイルの送信時に存在します):ファイルの種類 (非常に簡単に偽造)。そして境界 (区切り文字、ブラウザーが異なれば、送信ごとに異なります)

最後に、この情報は統合され、メッセージにエンコードされ、サーバー (バイナリデータ形式) に送信されます。

次の点に注意してください: 主な目的はファイルのアップロードであるため、アップロードのサイズには特定の要件があるため、アップロードに GET を使用する場合、メソッドは POST としてのみ選択できます。ファイルが送信されます。

このオプションは、ファイルをアップロードするときに使用する必要があるオプションです。enctype を「multipart/form-data」に設定した後、3525558f8f338d4ea90ebf22e5cde2bc を使用してファイルをアップロードできます。

<フォームアクション="server.js" メソッド="POST" enctype="マルチパート/form-data">
<input type="file" 名前=「file0」 >
<入力タイプ=「送信」値=「アップロード」 > ;
フォーム>

FormData は ES によって提供される API で、Ajax ファイル送信の実装に使用できます:

FormData の使用方法を見てみましょう:

var formData = new FormData (); //インスタンスを作成するには、フォームに対応する DOM ノードをパラメータとして渡すことができ、フォーム内のデータは formData インスタンスに保存されます。

FormData.append(name, value); // append メソッドを使用し、対応するキーと値を渡します

// その他のコード

最後に、フォームインスタンスを xhr.send(); にスローします。

xhr.send(formData);

var xhr = new XMLHttpRequest();
//使用FormData构造函数创建一个FormData的实例 
var formData = new FormData(); 
// formData.append(&#39;file0&#39;, oInput.value);
//注意，这里的value不是普通的表单value，而是一个file对象 
formData.append(&#39;file0&#39;, oInput.files[0]); 
xhr.open(&#39;POST&#39;, &#39;http://localhost:8080&#39;);  
xhr.onload = function(){  
  if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {  
    console.log(xhr.responseText);  
  }  
};
//form表单的默认值为①，而FormData的默认值为multipart/form-data,所以不用画蛇添足的去修改请求头  
//xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;multipart/form-data&#39;);
xhr.send(formData);

前述のように、append に渡される値は通常の入力値ではなく、ファイルオブジェクトに関する知識はスペースによって制限されます。興味があれば、Baidu で検索してみてください。

この他にも、ファイルの操作は一般的なサイズの小さいファイルだけでなく、動画サイトによる動画などの大きなファイルの操作も理解するだけでは十分ではありません。また、関連する API を学習し、BLOB オブジェクトについて深く理解します。この点については後でまとめて公開します。

この記事では、フォームと FormData を使用したファイル送信に関する内容について説明します。その他の関連内容については、php 中国語 Web サイトを参照してください。

フォームと FormData を使用してファイルを送信します。

関連記事