jQuery Ajax の FormData を使用したファイルやその他のデータのアップロード例の詳細な説明

この記事では、jQuery Ajax が FormData を使用してファイルをアップロードし、バックエンド web.py から他のデータを取得する方法を主に紹介します。必要な友人が参考になれば幸いです。

XMLHttpRequest レベル 2 では、新しいインターフェース FormData が追加されます。通常の Ajax と比較して、FormData を使用する最大の利点は、バイナリ ファイルを非同期でアップロードできることです。

jQuery バージョン 2.0 以降は FormData をサポートします

方法 1:

フォームを使用して FormData オブジェクトを初期化し、ファイルをアップロードします

•フロントエンド (JQuery):

<form enctype="multipart/form-data">
  <input type="file" name="myfile" onchange="loadFile(this.files[0])">
</form>
<script>
  function loadFile(file){
    var formdata = new FormData($$('form')[0]);
    $.ajax({
      url: 'jobs/add',
      type: 'POST',
      datatype: 'json',
      data: formdata,
      cache:false,
      traditional: true,
      contentType: false,
      processData: false,
      success: function (data) {},
      error: function () {}
    });
  }
</script>

•バックエンド (web.py):

class Add:
  def POST(self):
    i = web.input(myfile={})
    print(i['myfile'].filename) #文件名
    print(i['myfile'].value) #文件内容
    print(i['myfile'].file.read()) #文件内容

注:

1. の enctype 属性は「multipart/form-data」に設定する必要があります

2. $.ajax の processData、contentType、およびキャッシュを false に設定する必要があります

3. バックエンドは、web.input を通じてファイルを取得します。フィールド名は、フロントエンドで指定された input タグの name 属性と同じです

方法 2√: の代わりに、FormData オブジェクトを使用してフィールドを追加しますファイルをアップロードするため

場合によっては、

タグを使用せず、ajax 経由で渡します。バックエンドはファイルだけではなく、他のキーと値のペアが存在する場合もあります。この場合、この方法を使用できます。

• フロントエンド (JQuery):

<input type="file" onchange="loadFile(this.files[0])" />
function loadFile(file){
  container.fd = new FormData();
  container.fd.append('myfile',file);
  container.fd.append('otherkey',othervalue);
  $.ajax({
    url: 'jobs/add',
    type: 'POST',
    datatype: 'json',
    data: fd,
    cache:false,
    traditional: true,
    contentType: false,
    processData: false,
    success: function (data) {},
    error: function () {}
  });
}

• バックエンド (web.py):

class Add:
  def POST(self):
    i = web.input(myfile={}, otherkey='')
    print(i['myfile'].filename) #文件名
    print(i['myfile'].value) #文件内容
    print(i['myfile'].file.read()) #文件内容

注:

1. タグはありません (あると便利です)

2. append() メソッドの 2 番目のパラメーターは、HTML のloadFile メソッドのパラメーターを通じて渡されたファイル オブジェクトです。

3. バックエンドは、ファイルのフィールド名を取得します。フロントエンドのappend()メソッドの第一パラメータと同じ

4. web.inputで取得する値は全て文字列なので、ファイル以外のキーと値のペアを渡す場合はnullが渡されます。 . 文字列「null」に自動的に変換されます。この点を扱うときは注意が必要です

関連する推奨事項:

HTML の FormData オブジェクトの詳細な紹介

FormData を使用してフォームを送信し、画像をアップロードする方法

オブジェクトで FormData を使用するJavaScript

以上がjQuery Ajax の FormData を使用したファイルやその他のデータのアップロード例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。